/* ============================================================
   AEGIS MESH, DESIGN TOKENS
   ============================================================
   Single source of truth for the design system.
   Two-tier token architecture:
     1. Primitives, raw values, theme-agnostic
     2. Semantics, role-based, theme-switchable
   Consumers should ONLY reference semantic tokens.
   Reference: /design-tokens.json (DTCG format) mirrors this file.
   ============================================================ */

/* ---------- LAYER 1: PRIMITIVES --------------------------- */

:root {
  /* Brand, Aegis Teal (forensic sentinel) */
  --teal-50:  #E8FDF7;
  --teal-100: #C2F8E8;
  --teal-200: #8FF0D6;
  --teal-300: #4EE8C2;
  --teal-400: #14E4D0;   /* ★ PRIMARY BRAND HUE */
  --teal-500: #0FBFB3;
  --teal-600: #0A968F;
  --teal-700: #07726D;
  --teal-800: #05514E;
  --teal-900: #033633;

  /* Authority, Badge Gold (policy seals, enforcement marks) */
  --gold-300: #F4D279;
  --gold-400: #E6BC55;
  --gold-500: #D4A84A;   /* ★ AUTHORITY ACCENT */
  --gold-600: #B48936;
  --gold-700: #8C6925;

  /* Trust, Deep Navy (institutional, light-mode, trust badges) */
  --navy-50:  #EEF2F8;
  --navy-100: #CDD7E6;
  --navy-200: #99ADC9;
  --navy-300: #6682AB;
  --navy-400: #405B87;
  --navy-500: #1E3C63;
  --navy-600: #15304F;
  --navy-700: #0B1E3F;   /* ★ TRUST HUE */
  --navy-800: #07142A;
  --navy-900: #040C1A;

  /* Neutrals, forensic-calm (slightly cool) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F5F6F9;
  --neutral-100: #E8EAEF;
  --neutral-200: #D1D5DE;
  --neutral-300: #AFB5C3;
  --neutral-400: #828A9D;
  --neutral-500: #5A6274;
  --neutral-600: #3E4556;
  --neutral-700: #262C3A;
  --neutral-800: #161B26;
  --neutral-900: #0D111A;
  --neutral-950: #070A11;
  --neutral-1000:#03050A;

  /* Semantic hues, 5-tier each, forensic register */
  /* Info (informational, neutral signal) */
  --info-subtle:  #0B2E33;
  --info-muted:   #147780;
  --info-default: #29C1D4;
  --info-strong:  #6FE2EE;
  --info-intense: #B8F1F6;

  /* OK (allow, attested, verified) */
  --ok-subtle:    #0A2920;
  --ok-muted:     #128159;
  --ok-default:   #2FCF8E;
  --ok-strong:    #72E3B2;
  --ok-intense:   #B8F1D7;

  /* Warn (escalated, caution, policy-breach-pending) */
  --warn-subtle:  #2B1F06;
  --warn-muted:   #8C6F1E;
  --warn-default: #E6BC55;
  --warn-strong:  #F2D487;
  --warn-intense: #F9E8BD;

  /* Crit (blocked, denied, tamper-detected) */
  --crit-subtle:  #2E0D11;
  --crit-muted:   #993E49;
  --crit-default: #E05566;
  --crit-strong:  #F0909B;
  --crit-intense: #F7C4CC;

  /* ---------- TYPOGRAPHY PRIMITIVES ------------------- */

  /* Font stacks (Inter Display Variable → Inter fallback; JetBrains Mono) */
  --font-display:
    "Inter Display", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --font-mono:
    "JetBrains Mono", "SF Mono", "Fira Code",
    ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* Type scale, 1.25 (major third) */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;   /* body default */
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  40px;
  --text-3xl:  56px;
  --text-4xl:  72px;   /* hero */

  /* Line heights, semantic */
  --leading-display: 1.08;
  --leading-heading: 1.22;
  --leading-body:    1.6;
  --leading-dense:   1.4;
  --leading-mono:    1.55;

  /* Letter-spacing, semantic */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* ---------- SPACE, 9-step scale -------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADIUS ---------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 9999px;

  /* ---------- MOTION ---------------------------------- */
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-ambient: 3000ms;

  --ease-out-brand:    cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-in-out-brand: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-decisive:     cubic-bezier(0.17, 0.67, 0.3, 1);

  /* ---------- Z-INDEX --------------------------------- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-nav:      500;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    3000;
  --z-tooltip:  4000;

  /* ---------- LAYOUT ---------------------------------- */
  --container-sm:   720px;
  --container-md:   960px;
  --container-lg:   1320px;   /* default marketing container */
  --container-xl:   1440px;   /* data-dense product container */
  --container-full: 100%;

  --gutter-page: var(--space-5);  /* 24px horizontal page gutter */
}

/* ---------- LAYER 2: SEMANTIC TOKENS ---------------------- */
/* Defaults to dark theme. Light mode overrides below.        */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces, 6-tier elevation by tone */
  --surface-canvas:    var(--neutral-1000);   /* body / page bg */
  --surface-raised:    var(--neutral-900);    /* section bands */
  --surface-overlay:   var(--neutral-800);    /* cards / panels */
  --surface-floating:  var(--neutral-700);    /* modals / popovers */
  --surface-sunken:    #020308;               /* code blocks / wells */
  --surface-inverse:   var(--neutral-0);      /* light-mode inversion slot */

  /* Text, 5-tier, all ≥ WCAG AA on surface-canvas */
  --text-strong:   #F0F2F7;   /* primary headings, key data (17.8:1) */
  --text-default:  #D8DBE4;   /* body copy (13.5:1) */
  --text-subtle:   #A5ABBC;   /* secondary copy (7.1:1) */
  --text-faint:    #7A8092;   /* tertiary / timestamps (4.7:1, AA min) */
  --text-disabled: #4A5062;   /* disabled only, never for content */
  --text-on-accent:var(--neutral-1000);       /* black on teal button */
  --text-on-navy:  var(--neutral-50);

  /* Borders, by role, not just opacity */
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-default:  rgba(255, 255, 255, 0.12);
  --border-strong:   rgba(255, 255, 255, 0.20);
  --border-accent:   color-mix(in oklab, var(--teal-400) 35%, transparent);
  --border-focus:    var(--teal-400);

  /* Brand, semantic aliases */
  --brand-primary:        var(--teal-400);
  --brand-primary-hover:  var(--teal-300);
  --brand-primary-active: var(--teal-500);
  --brand-primary-muted:  color-mix(in oklab, var(--teal-400) 15%, var(--neutral-1000));
  --brand-authority:      var(--gold-500);
  --brand-authority-hover:var(--gold-400);
  --brand-trust:          var(--navy-700);

  /* State colors, all with subtle/strong pair */
  --state-info-subtle:  var(--info-subtle);
  --state-info-strong:  var(--info-default);
  --state-ok-subtle:    var(--ok-subtle);
  --state-ok-strong:    var(--ok-default);
  --state-warn-subtle:  var(--warn-subtle);
  --state-warn-strong:  var(--warn-default);
  --state-crit-subtle:  var(--crit-subtle);
  --state-crit-strong:  var(--crit-default);

  /* Elevation, structural shadows */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --elev-2: 0 4px 8px rgba(0, 0, 0, 0.45);
  --elev-3: 0 8px 24px rgba(0, 0, 0, 0.50);
  --elev-4: 0 16px 48px rgba(0, 0, 0, 0.55);
  --elev-5: 0 24px 64px rgba(0, 0, 0, 0.60);

  /* Brand glow, emphasis, never decorative */
  --glow-sm:  0 0 16px color-mix(in oklab, var(--teal-400) 30%, transparent);
  --glow-md:  0 0 32px color-mix(in oklab, var(--teal-400) 25%, transparent);
  --glow-lg:  0 0 64px color-mix(in oklab, var(--teal-400) 20%, transparent);
  --glow-authority: 0 0 24px color-mix(in oklab, var(--gold-500) 35%, transparent);
  --glow-crit:      0 0 24px color-mix(in oklab, var(--crit-default) 30%, transparent);

  /* Focus ring, keyboard navigation */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--teal-400) 45%, transparent);
}

/* ---------- LIGHT THEME ----------------------------------- */

[data-theme="light"] {
  color-scheme: light;

  --surface-canvas:    #FBFBFD;
  --surface-raised:    var(--neutral-0);
  --surface-overlay:   var(--neutral-50);
  --surface-floating:  var(--neutral-0);
  --surface-sunken:    #F0F2F6;
  --surface-inverse:   var(--neutral-950);

  --text-strong:   #0A0E17;
  --text-default:  #1F2530;
  --text-subtle:   #4A5162;
  --text-faint:    #6A7184;
  --text-disabled: #A5ABBC;
  --text-on-accent:var(--neutral-1000);
  --text-on-navy:  var(--neutral-50);

  --border-subtle:   rgba(0, 0, 0, 0.06);
  --border-default:  rgba(0, 0, 0, 0.12);
  --border-strong:   rgba(0, 0, 0, 0.20);
  --border-accent:   color-mix(in oklab, var(--teal-500) 45%, transparent);
  --border-focus:    var(--teal-600);

  --brand-primary:        var(--teal-500);
  --brand-primary-hover:  var(--teal-600);
  --brand-primary-active: var(--teal-700);
  --brand-primary-muted:  var(--teal-50);
  --brand-authority:      var(--gold-600);
  --brand-authority-hover:var(--gold-500);
  --brand-trust:          var(--navy-700);

  --state-info-subtle:  #E7F7FA;
  --state-info-strong:  var(--teal-600);
  --state-ok-subtle:    #E3F7EE;
  --state-ok-strong:    #13794E;
  --state-warn-subtle:  #FAF1DC;
  --state-warn-strong:  #8F6A1A;
  --state-crit-subtle:  #FAE4E7;
  --state-crit-strong:  #A8313F;

  --elev-1: 0 1px 2px rgba(15, 20, 35, 0.06);
  --elev-2: 0 4px 12px rgba(15, 20, 35, 0.08);
  --elev-3: 0 8px 24px rgba(15, 20, 35, 0.10);
  --elev-4: 0 16px 48px rgba(15, 20, 35, 0.12);
  --elev-5: 0 24px 64px rgba(15, 20, 35, 0.14);

  --glow-sm:  0 0 16px color-mix(in oklab, var(--teal-500) 20%, transparent);
  --glow-md:  0 0 32px color-mix(in oklab, var(--teal-500) 18%, transparent);
  --glow-lg:  0 0 64px color-mix(in oklab, var(--teal-500) 15%, transparent);

  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--teal-500) 45%, transparent);
}

/* Auto-switch based on OS preference unless data-theme is explicit */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --surface-canvas:    #FBFBFD;
    --surface-raised:    var(--neutral-0);
    --surface-overlay:   var(--neutral-50);
    --surface-floating:  var(--neutral-0);
    --surface-sunken:    #F0F2F6;
    --surface-inverse:   var(--neutral-950);

    --text-strong:   #0A0E17;
    --text-default:  #1F2530;
    --text-subtle:   #4A5162;
    --text-faint:    #6A7184;
    --text-disabled: #A5ABBC;

    --border-subtle:   rgba(0, 0, 0, 0.06);
    --border-default:  rgba(0, 0, 0, 0.12);
    --border-strong:   rgba(0, 0, 0, 0.20);

    --brand-primary:       var(--teal-500);
    --brand-primary-hover: var(--teal-600);
  }
}

/* ---------- FORCED-COLORS (High Contrast Mode) ------------ */
@media (forced-colors: active) {
  :root {
    --brand-primary: CanvasText;
    --text-strong:   CanvasText;
    --text-default:  CanvasText;
    --text-subtle:   CanvasText;
    --border-focus:  Highlight;
  }
}

/* ---------- REDUCED MOTION -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-ambient: 0ms;
  }
}