/**
 * @file
 * Color tokens — primitives (raw palette) + semantic color roles + focus rings.
 *
 * This is the ONLY file in the custom modules allowed to contain raw hex color
 * literals (enforced by stylelint `color-no-hex`). Feature CSS must consume the
 * semantic tokens below, never a primitive or a hex value.
 *
 * See the sibling token files for non-color scales:
 *   typography.css · layout.css · elevation.css
 */

:root {
  /* ===================================================================
   * PRIMITIVES — raw palette (hex allowed here only)
   * =================================================================== */

  --ed-white: #fff;
  --ed-black: #1a1a1a;

  /* Brand blue — canonical #0074bd (most common); darker steps for
     headers/hover, tints for backgrounds/borders. */
  --ed-brand-50: #e7f2f9;
  --ed-brand-100: #c5dcef;
  --ed-brand-500: #0074bd;
  --ed-brand-700: #005a94;
  --ed-brand-800: #003d6b;
  --ed-brand-900: #00294a;

  /* Neutral gray scale — absorbs the full text + border + surface gray sea
     (#fafafa..#222 and cool-gray equivalents like #6b7280/#374151). */
  --ed-gray-50: #fafafa;
  --ed-gray-100: #f5f5f5;
  --ed-gray-200: #eee;
  --ed-gray-300: #e0e0e0;
  --ed-gray-400: #ddd;
  --ed-gray-500: #ccc;
  --ed-gray-600: #999;
  --ed-gray-700: #767676; /* AA on white — canonical subtle text */
  --ed-gray-800: #555;
  --ed-gray-900: #333;

  /* Slate — the distinct navy used for some headings/panels (#2c3e50). */
  --ed-slate-800: #2c3e50;
  --ed-slate-500: #6c757d; /* mid slate — "unset"/neutral solid chips */

  /* Cool grays — blue-tinted panel/border neutrals used by dashboards
     (collapses the #f6f7f9/#eef5fb/#f0f4f8/#f8f9fb tints and the
     #d3d7df/#c0c4cc cool borders that recur in filter bars and toolbars). */
  --ed-cool-50: #f6f7f9;
  --ed-cool-300: #c0c4cc;

  /* Success green */
  --ed-green-50: #e8f5e9;
  --ed-green-200: #c8e6c9;
  --ed-green-500: #2e7d32;
  --ed-green-700: #1b5e20;

  /* Danger red */
  --ed-red-50: #fdecea;
  --ed-red-200: #f5c6cb;
  --ed-red-500: #d32f2f;
  --ed-red-700: #c62828;
  --ed-red-800: #b71c1c;

  /* Warning amber/orange — base is the deep orange used for text (#e65100);
     accent is the gold used for bars/indicators (#ffb300). */
  --ed-amber-50: #fff8e1;
  --ed-amber-200: #ffeeba;
  --ed-amber-400: #ffb300;
  --ed-amber-500: #e65100;
  --ed-amber-600: #bf4500; /* darker orange — warning button hover */
  --ed-amber-800: #856404;

  /* Info blue — Material blue, kept distinct from the corporate brand blue. */
  --ed-blue-50: #e3f2fd;
  --ed-blue-200: #bbdefb;
  --ed-blue-500: #1565c0;
  --ed-blue-700: #0d47a1;

  /* Rare accents — teal, maroon, and purple appear a handful of times. */
  --ed-teal-50: #eef7f5;
  --ed-teal-500: #00838f;
  --ed-teal-700: #005662; /* darker teal — link hover */
  --ed-maroon-500: #8b2332; /* CT-evaluation branded header */
  --ed-purple-50: #faf5ff;
  --ed-purple-500: #7b1fa2;

  /* ===================================================================
   * SEMANTIC — role tokens (reference primitives). Use these in features.
   * =================================================================== */

  /* Text */
  --ed-color-text: var(--ed-gray-900);
  --ed-color-text-muted: var(--ed-gray-800);
  --ed-color-text-subtle: var(--ed-gray-700);
  --ed-color-text-on-brand: var(--ed-white);
  --ed-color-heading: var(--ed-slate-800);

  /* Surfaces */
  --ed-color-surface: var(--ed-white);
  --ed-color-surface-raised: var(--ed-gray-50);
  --ed-color-surface-sunken: var(--ed-gray-100);
  --ed-color-surface-tint: var(--ed-cool-50); /* cool panel/filter-bar bg */

  /* Borders */
  --ed-color-border: var(--ed-gray-400);
  --ed-color-border-strong: var(--ed-gray-500);
  --ed-color-border-subtle: var(--ed-gray-300);
  --ed-color-border-cool: var(--ed-cool-300); /* cool form-control/panel border */

  /* Neutral solid — for "unset"/muted solid chips (not a semantic status) */
  --ed-color-neutral: var(--ed-slate-500);

  /* Feature accent — CT-evaluation branded header maroon (distinct from danger) */
  --ed-color-maroon: var(--ed-maroon-500);

  /* Brand */
  --ed-color-brand: var(--ed-brand-500);
  --ed-color-brand-dark: var(--ed-brand-700);
  --ed-color-brand-darker: var(--ed-brand-800);
  --ed-color-brand-tint: var(--ed-brand-50);

  /* Success — base (solid), fg (text on tint), border + bg for panels */
  --ed-color-success: var(--ed-green-500);
  --ed-color-success-fg: var(--ed-green-700);
  --ed-color-success-border: var(--ed-green-200);
  --ed-color-success-tint: var(--ed-green-50);

  /* Danger */
  --ed-color-danger: var(--ed-red-500);
  --ed-color-danger-strong: var(--ed-red-700);
  --ed-color-danger-fg: var(--ed-red-800);
  --ed-color-danger-border: var(--ed-red-200);
  --ed-color-danger-tint: var(--ed-red-50);

  /* Warning */
  --ed-color-warning: var(--ed-amber-500);
  --ed-color-warning-dark: var(--ed-amber-600); /* hover for solid warning */
  --ed-color-warning-accent: var(--ed-amber-400);
  --ed-color-warning-fg: var(--ed-amber-800);
  --ed-color-warning-border: var(--ed-amber-200);
  --ed-color-warning-tint: var(--ed-amber-50);

  /* Info */
  --ed-color-info: var(--ed-blue-500);
  --ed-color-info-fg: var(--ed-blue-700);
  --ed-color-info-border: var(--ed-blue-200);
  --ed-color-info-tint: var(--ed-blue-50);

  /* Focus rings */
  --ed-ring: 0 0 0 2px rgba(0, 116, 189, 0.15);
  --ed-ring-danger: 0 0 0 2px rgba(211, 47, 47, 0.15);
}