/*
  Color tokens for the stack-admin redesign.
  Consolidates the three legacy sources (app/assets/stylesheets/config/colors.scss,
  util/colors.scss, var.scss) into one system. Legacy files are left untouched;
  see tokens/README.md for the old-name -> new-name mapping.

  Palette reworked for WCAG AA text contrast on white (see .impeccable.md
  Design Principles: trustworthy/precise/calm, light mode only, AA baseline).
*/

:root {
  /* Neutrals (grayscale) */
  --color-gray-0: #FFFFFF;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #DADADA;
  --color-gray-400: #CCCCCC;
  --color-gray-500: #999999;
  --color-gray-600: #767676; /* darkened from legacy #777 to clear 4.5:1 on white */
  --color-gray-700: #444444;
  --color-gray-800: #2F2F2F;
  --color-gray-900: #1A1A1A;

  /* Brand / semantic base (derived from var.scss $brand-* mappings).
     Each semantic color has two forms:
     - the base token (e.g. --color-primary) is >= 4.5:1 on white, safe for text/icons-as-text.
     - the "-vivid" token is a higher-saturation accent form for icon chips, focus rings,
       and tinted shadows. --color-primary-vivid and --color-danger-vivid are ALSO used as
       solid button backgrounds with white text, so both are verified >= 4.5:1 against
       white text. success/info/warning-vivid are accent-only (icon chips, left borders,
       progress bars) and are not used under white text, so they keep more saturation. */
  --color-primary: #007AB7;         /* darkened from legacy $light-blue #00B0FF; 4.70:1 on white */
  --color-primary-vivid: #2F6FEB;   /* saturated UI-chrome blue; 4.54:1 with white text on top */
  --color-primary-hover: #2557C4;
  --color-primary-surface: #EAF1FE; /* tint background for icon chips / selected nav */

  --color-success: #297D63;         /* darkened from legacy $light-green #70BEAB; 4.99:1 on white */
  --color-success-vivid: #16A34A;   /* accent-only: icon chips, progress bars, left borders */
  --color-success-surface: #E7F5F0;

  --color-info: #277C90;            /* darkened from legacy $turquoise #38AAC2; 4.80:1 on white */
  --color-info-vivid: #0EA5E9;      /* accent-only */
  --color-info-surface: #E7F4F7;

  --color-warning: #B8590E;         /* darkened from legacy $orange #F98E33; 4.69:1 on white */
  --color-warning-vivid: #F59E0B;   /* accent-only */
  --color-warning-surface: #FDF1E5;

  --color-danger: #C22A1B;          /* darkened from legacy active $red #E94B3B; 5.77:1 on white */
  --color-danger-vivid: #D73D3D;    /* saturated UI-chrome red; 4.54:1 with white text on top */
  --color-danger-surface: #FBEAE8;

  /* Text */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-disabled: var(--color-gray-500);
  --color-text-on-brand: var(--color-gray-0);
  /* --color-text-secondary is verified >= 4.5:1 on white ONLY -- against
     --color-primary-surface (#EAF1FE) it measures ~4.0:1, under the AA floor
     for normal-size text. Use this token instead for secondary/caption text
     rendered on a tinted surface (selected cards, active chips, etc.);
     --color-gray-700 clears 8.5:1 on --color-primary-surface. */
  --color-text-secondary-on-tint: var(--color-gray-700);

  /* Surfaces & borders */
  --color-bg-page: var(--color-gray-50);
  --color-bg-surface: var(--color-gray-0);
  --color-bg-surface-sunken: var(--color-gray-100);
  --color-border: var(--color-gray-300);
  --color-border-strong: var(--color-gray-400);

  /* Focus ring (accessibility) */
  --color-focus-ring: var(--color-primary);
}