/* CSI Color System
   Palette from brand guidelines. Navy is the anchor; electric blue is the
   interactive/accent color; yellow is a sparing highlight (the logo spark). */
:root{
  /* --- Brand base palette --- */
  --csi-navy:#161653;        /* primary — headings, body text, wordmark */
  --csi-blue:#0030F0;        /* electric blue — accents, links, arrows */
  --csi-blue-logo:#0116FF;   /* exact logo blue (asset match) */
  --csi-yellow:#FEFE00;      /* highlight spark — use sparingly */
  --csi-teal:#70C8D8;        /* outlines, light accents */
  --csi-mint:#EBF7F7;        /* section tints / banded backgrounds */
  --csi-offwhite:#F4F4F6;    /* page background */
  --csi-bluegrey:#BFCCD8;    /* dot-grid pattern, hairlines */
  --csi-white:#FFFFFF;

  /* Extended neutrals (derived, harmonious with navy) */
  --csi-ink-900:var(--csi-navy); /* darkest ink — cursor, maximum emphasis */
  --csi-ink-700:#2B2B6B;     /* softened navy for large text blocks */
  --csi-ink-500:#5B5B86;     /* muted navy — secondary text */
  --csi-ink-300:#9A9ABB;     /* tertiary / placeholder */
  --csi-line:#DFE4EC;        /* default hairline */
  --csi-blue-tint:#E7ECFE;   /* blue wash / selected states */
  --csi-blue-hover:#0026C4;  /* blue pressed/hover darken */

  /* Semantic status (kept close to brand hues) */
  --csi-success:#1F9D7A;
  --csi-warning:#E6A700;
  --csi-danger:#D64545;

  /* --- Semantic aliases (use these in components) --- */
  --text-heading:var(--csi-navy);
  --text-body:var(--csi-ink-700);
  --text-muted:var(--csi-ink-500);
  --text-inverse:var(--csi-white);
  --text-link:var(--csi-blue);
  --text-link-hover:var(--csi-blue-hover);

  --surface-page:var(--csi-offwhite);
  --surface-card:var(--csi-white);
  --surface-band:var(--csi-mint);
  --surface-invert:var(--csi-navy);
  --surface-selected:var(--csi-blue-tint);

  --accent:var(--csi-blue);
  --accent-highlight:var(--csi-yellow);
  --accent-soft:var(--csi-teal);

  --border-default:var(--csi-line);
  --border-strong:var(--csi-bluegrey);
  --border-accent:var(--csi-teal);
  --focus-ring:var(--csi-blue);
}