/* ==========================================================================
   Varangian Guard design tokens
   The single source of truth. Every panel migrates onto these.
   OKLCH throughout. Compose derivatives with color-mix(); never redeclare a
   primitive's value in two places.
   ========================================================================== */

/* Self-hosted variable fonts — drop-in replacement for Google Fonts CDN.
   Files in ./fonts/. Variable woff2 covers all weights 100-900 (latin). */
@font-face {
  font-family: "Sora";
  src: url("fonts/sora.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

:root {
  /* -------- Color primitives (from DESIGN.md) --------------------------- */
  --vault-floor:     oklch(0.263 0.041 187.1);        /* page bg — pure neutral near-black */
  --panel:           oklch(0.275 0.040 187.2);   /* cards / sections, faintly warm  */
  --panel-raised:    oklch(0.306 0.022 182.0);   /* sticky headers, topbar, raised  */
  --hairline:        oklch(0.356 0.053 183.8);    /* borders / dividers              */
  --ink:             oklch(0.980 0.003 174.5);    /* body text — warm paper-white    */
  --ink-muted:       oklch(0.825 0.043 188.9);    /* secondary text / labels         */
  --ink-faint:       color-mix(in oklch, var(--ink-muted) 70%, var(--vault-floor));    /* placeholders — kept ≥4.5:1 on floor */
  --byzantine-teal:         oklch(0.710 0.120 188.5);    /* primary brand — signature */
  --deep-teal:    oklch(0.572 0.097 188.4);    /* primary hover / pressed         */
  --teal-100:    oklch(0.921 0.041 190.7);    /* accent — focus ring, fine detail*/
  --verdict-safe:    oklch(0.70 0.150 150);   /* green — functional              */
  --verdict-caution: oklch(0.78 0.140 75);    /* amber — functional              */
  --verdict-danger:  oklch(0.62 0.200 28);    /* red — functional                */

  /* -------- Semantic surfaces ------------------------------------------- */
  --bg:            var(--vault-floor);
  --surface:       var(--panel);
  --surface-raised: var(--panel-raised);
  --border:        var(--hairline);
  --text:          var(--ink);
  --text-muted:    var(--ink-muted);

  /* -------- Primary (byzantine-teal) interactive derivatives ------------------- */
  --primary:         var(--byzantine-teal);
  --primary-hover:   var(--deep-teal);
  --primary-contrast: var(--vault-floor);   /* dark-on-teal text           */

  /* -------- Focus ring (the teal-100 halo) -------------------------------- */
  --ring-offset: var(--vault-floor);
  --ring-color:  var(--teal-100);
  --focus-ring:  0 0 0 2px var(--ring-offset), 0 0 0 4px var(--ring-color);

  /* -------- Verdict system (the fulcrum) --------------------------------
     Each verdict: a bright label/icon/border color + a tinted surface +
     a border, derived from the primitive so the source stays single.       */
  --safe-fg:      var(--verdict-safe);
  --safe-bg:      color-mix(in oklch, var(--verdict-safe) 14%, var(--panel));
  --safe-border:  color-mix(in oklch, var(--verdict-safe) 45%, transparent);

  --caution-fg:   var(--verdict-caution);
  --caution-bg:   color-mix(in oklch, var(--verdict-caution) 14%, var(--panel));
  --caution-border: color-mix(in oklch, var(--verdict-caution) 45%, transparent);

  --danger-fg:    var(--verdict-danger);
  --danger-bg:    color-mix(in oklch, var(--verdict-danger) 16%, var(--panel));
  --danger-border: color-mix(in oklch, var(--verdict-danger) 50%, transparent);

  /* -------- State tints (sent/received, info) --------------------------- */
  --out-bg: color-mix(in oklch, var(--verdict-danger) 10%, var(--panel));
  --in-bg:  color-mix(in oklch, var(--verdict-safe) 10%, var(--panel));
  --info-bg: color-mix(in oklch, var(--teal-100) 8%, var(--panel));

  /* -------- Typography --------------------------------------------------- *
   * Product register: fixed rem scale, tight ratio, one sans + one mono.   *
   * Light-on-dark compensation: line-height +0.05, body letter-spacing on. */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;

  --text-xs:      0.75rem;     /* 12 — meta, timestamps                    */
  --text-sm:      0.8125rem;   /* 13 — mono data, secondary UI             */
  --text-base:    0.9375rem;   /* 15 — body, UI labels (clear step + a11y) */
  --text-md:      1.125rem;    /* 18 — emphasized body / verdict label     */
  --text-lg:      1.5rem;      /* 24 — section title emphasis (rare)       */
  --text-verdict: 1.125rem;    /* 18 — verdict label (mono, bold)          */

  --leading-tight: 1.25;
  --leading-body:  1.6;        /* bumped for dark                          */
  --leading-data:  1.5;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0.005em;  /* slight open for dark body                */
  --tracking-label:  0.06em;   /* uppercase labels                         */
  --tracking-verdict: 0.08em;  /* verdict label                            */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* -------- Spacing (4pt base) ------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-16: 64px;

  /* -------- Radii -------------------------------------------------------- */
  --radius-sm: 4px;   /* buttons, inputs — institutional, tight            */
  --radius-md: 8px;   /* badges, chips                                      */
  --radius-lg: 12px;  /* cards, panels, verdict banners                     */

  /* -------- Motion (restrained — state changes only) -------------------- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* ease-out-quint */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* -------- Elevation (flat by default; one modal shadow) --------------- */
  --shadow-modal: 0 24px 64px oklch(0 0 0 / 0.6), 0 0 0 1px var(--hairline);

  /* -------- Z-index scale (semantic, never arbitrary) ------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-modal-backdrop: 2000;
  --z-modal: 2001;
  --z-toast: 3000;

  /* -------- Layout defaults --------------------------------------------- */
  --page-max: 1200px;
  --topbar-h: 52px;
}

/* -------- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}