/* ============================================================
   CShield · Color tokens (light mode default)
   Three brand anchors are LOCKED. Everything else harmonizes.
   Primary blue lives as accent, never as a card/panel field.
   Active Interruption red (#DC2626) is reserved for ONE screen.
   ============================================================ */
:root {
  /* ---- Brand anchors (locked) ---- */
  --brand-primary: #1762F9;          /* primary actions, accent, focus rings */
  --brand-primary-hover: #0F4FD9;
  --brand-primary-pressed: #0A3FB3;
  --brand-primary-wash: #E6EEFE;     /* ghost hover, active/scanning surface, selected row */
  --active-interruption: #DC2626;    /* RESERVED — Active Interruption takeover only */
  --brand-critical: #991B1B;         /* deepest severity tier */

  /* ---- Semantic: Safe / Success (emerald) ---- */
  --safe: #059669;
  --safe-surface: #D1FAE5;
  --safe-text: #065F46;

  /* ---- Semantic: Warning / Recommendation (amber) ---- */
  --warning: #D97706;
  --warning-surface: #FEF3C7;
  --warning-text: #92400E;

  /* ---- Semantic: Critical (red) ---- */
  --critical: #991B1B;
  --critical-surface: #FEE2E2;
  --critical-text: #7F1D1D;

  /* Info has NO dedicated hue — use neutral type + leading info icon. */

  /* ---- Neutral ramp (slate, slight cool undertone) ---- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --white: #FFFFFF;

  /* ---- Semantic aliases (reference these in components) ---- */
  --page-bg: var(--slate-50);
  --surface-card: var(--white);
  --surface-elevated: var(--white);
  --surface-subtle: var(--slate-100);        /* alt rows, code blocks, search rest */
  --border-default: var(--slate-200);
  --border-emphasis: var(--slate-300);
  --divider: var(--slate-300);
  --text-primary: var(--slate-800);          /* body */
  --text-secondary: var(--slate-600);        /* helper, secondary */
  --text-tertiary: var(--slate-500);         /* captions */
  --text-heading: var(--slate-900);          /* headings, asset names */
  --text-on-accent: var(--white);
  --icon-tertiary: var(--slate-400);
  --icon-disabled: var(--slate-400);
  --focus-ring: var(--brand-primary);
  --backdrop: rgba(15, 23, 42, 0.45);

  /* ---- Avatar palette (6 muted tones, separate from semantic colors
     so they never read as a status). White initials on top. ---- */
  --avatar-1: #7C6BAE;   /* muted violet */
  --avatar-2: #A2678A;   /* muted plum */
  --avatar-3: #C08552;   /* muted clay */
  --avatar-4: #5E7CA3;   /* muted steel */
  --avatar-5: #6B8E9E;   /* muted slate-cyan */
  --avatar-6: #8A7A5C;   /* muted olive */
}