/* TRUST Lab — Color tokens
   Source of truth: logo RGB PNGs + brand kit (#02EEF0 / #1625EE / #FFDF2B),
   report IDML (K95 ink, K10 gray). Midnight + cool-neutral ramp + status hues
   are modernization additions (documented in readme.md). */
:root {
  /* ─── Base: brand hues ─── */
  --tl-blue-600: #1625EE;   /* Trust Blue — primary brand color (logo "Lab") */
  --tl-blue-700: #111CC5;   /* hover */
  --tl-blue-800: #0D149B;   /* active / pressed */
  --tl-blue-500: #3D49F2;
  --tl-blue-100: #DFE2FD;
  --tl-blue-50:  #F0F1FE;

  --tl-cyan-400: #02EEF0;   /* Signal Cyan — accent (logo "TRUST") */
  --tl-cyan-300: #67F5F6;
  --tl-cyan-100: #CFFCFC;

  --tl-yellow-300: #FFDF2B; /* Marker Yellow — sparing highlight */
  --tl-yellow-100: #FFF7C7;

  /* ─── Base: ink + midnight ─── */
  --tl-ink-950: #0D0D0D;    /* K95 from report template */
  --tl-midnight-950: #070B2E; /* deep blue-black, dark surfaces (modernization) */
  --tl-midnight-900: #0C1140;
  --tl-midnight-800: #141A57;

  /* ─── Base: cool neutrals ─── */
  --tl-gray-25:  #FBFBFD;
  --tl-gray-50:  #F5F6F9;
  --tl-gray-100: #ECEDF3;
  --tl-gray-200: #DEE0E9;
  --tl-gray-300: #C4C7D4;
  --tl-gray-400: #979CB0;
  --tl-gray-500: #6B7086;
  --tl-gray-600: #4C5166;
  --tl-gray-700: #363A4C;
  --tl-gray-800: #222536;
  --tl-gray-900: #131523;

  /* ─── Status (threat-level language; modernization) ─── */
  --tl-status-critical: #D93036;
  --tl-status-warning:  #E8A200;
  --tl-status-ok:       #1D9E62;
  --tl-status-info:     var(--tl-blue-600);

  /* ─── Semantic: surfaces ─── */
  --surface-page:     #FFFFFF;
  --surface-subtle:   var(--tl-gray-50);
  --surface-card:     #FFFFFF;
  --surface-inverse:  var(--tl-midnight-950);
  --surface-brand:    var(--tl-blue-600);
  --surface-accent:   var(--tl-cyan-400);

  /* ─── Semantic: text ─── */
  --text-primary:   var(--tl-ink-950);
  --text-secondary: var(--tl-gray-600);
  --text-muted:     var(--tl-gray-400);
  --text-on-brand:  #FFFFFF;
  --text-on-accent: var(--tl-ink-950);
  --text-inverse:   #FFFFFF;
  --text-inverse-secondary: #A9AECB;
  --text-accent:    var(--tl-blue-600);
  --text-accent-inverse: var(--tl-cyan-400); /* cyan carries accent on dark */

  /* ─── Semantic: borders ─── */
  --border-default: var(--tl-gray-200);
  --border-strong:  var(--tl-ink-950);
  --border-inverse: rgba(255, 255, 255, 0.16);
  --border-accent:  var(--tl-blue-600);

  /* ─── Interaction ─── */
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--tl-blue-600);
  --focus-ring-inverse: 0 0 0 2px var(--tl-midnight-950), 0 0 0 4px var(--tl-cyan-400);
}