_colors.scss

:root {
  /**
   * Brand shades
   * You probably need to override these in your opco styles
   */
  --color--primary-darkest: #0c315a;
  --color--primary-dark: #1862b5;
  --color--primary: #1e7be2;
  --color--primary-light: #8ebcf1;
  --color--primary-lightest: #e8f2fc;

  --color--secondary-darkest: #7b4604;
  --color--secondary-dark: #f79824;
  --color--secondary: #f79824;
  --color--secondary-light: #fbc584;
  --color--secondary-lightest: #fef3e6;

  // Solaris
  // TODO: we want to get rid of these but it requires more than just color var changes
  --color--primary-solaris: #fe5000;
  --color--primary-solaris-light: #ff6800;

  // SSP
  --color--ssp-basic: #9ac6d9;
  --color--ssp-bronze: #6c5d4b;
  --color--ssp-silver: #555551;
  --color--ssp-gold: #7f6e3f;
  --color--ssp-platinum: #838b83;
  --color--ssp-diamond: #456573;

  /**
   * Feedback shades
   */
  --color--info-darkest: #234b5c;
  --color--info-dark: #296681;
  --color--info: #5ebfea;
  --color--info-light: #99d9f5;
  --color--info-lightest: #e5f7ff;

  --color--success-darkest: #2b4a1c;
  --color--success-dark: #4c8231;
  --color--success: #6cb946;
  --color--success-light: #98ce7e;
  --color--success-lightest: #ecfce8;

  --color--error-darkest: #660000;
  --color--error-dark: #b30000;
  --color--error: #ff0000;
  --color--error-light: #ff4c4d;
  --color--error-lightest: #ffe5e5;

  --color--warning-darkest: #664f00;
  --color--warning-dark: #b38600;
  --color--warning: #ffbf00;
  --color--warning-light: #ffd24c;
  --color--warning-lightest: #fff4ce;

  /**
   * Neutral/Gray shades
   */
  --color--shade-black: #292e33;
  --color--shade-darkest: #3b434a;
  --color--shade-dark: #697582;
  --color--shade-midtone: #9eacba;
  --color--shade-light: #d0d9e3;
  --color--shade-lightest: #f2f6fa;
  --color--shade-white: #ffffff;

  /**
   * Overlay shades
   */
  --color--overlay: rgba(0, 0, 0, 0.4);
  --color--overlay-image: rgba(0, 0, 0, 0.25);

  /**
   * Utillity color vars
   * These variables should only be assigned to color shades from the list above!
   */
  --color--text-primary: var(--color--shade-black);
  --color--text-secondary: var(--color--shade-dark);
  --color--text-alt: var(--color--shade-white);

  --color--background-primary: var(--color--shade-white);
  --color--background-secondary: var(--color--shade-lightest);

  --color--link: var(--color--primary);
  --color--link-hover: var(--color--primary-dark);

  --color--valid: var(--color--success);
  --color--invalid: var(--color--error);

  --color--focus-border: var(--color--primary);
  --color--focus-background: var(--color--shade-midtone);

  --color--border-dark: var(--color--shade-midtone);
  --color--border: var(--color--shade-light);
  --color--border-light: var(--color--shade-lightest);

  --color--disabled-background: var(--color--shade-lightest);
  --color--disabled-text: var(--color--shade-midtone);
  --color--disabled-border: var(--color--shade-midtone);
}