/* ==========================================================================
   Ziru Labs — Design Tokens
   Reference: brand architecture monochrome system, ink-navy single accent.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ----- Color: light mode (default) ----- */
  --ink-primary: #0A0C0E;
  --ink-secondary: #3B3F44;
  --ink-muted: #6B7075;
  --ink-faint: #9AA0A6;
  --surface-base: #FFFFFF;
  --surface-elevated: #F7F8FA;
  --surface-sunken: #F0F2F5;
  --surface-inverse: #0A0C0E;
  --ink-on-inverse: #F0F2F5;
  --border: #E4E6EA;
  --border-strong: #C8CCD2;
  --accent: #0F2436;
  --accent-hover: #1E3A52;
  --accent-on: #FFFFFF;
  --selection-bg: #0F2436;
  --selection-fg: #FFFFFF;

  /* Muted text on the inverse surface. These must flip with color scheme:
     in light mode the inverse surface is dark, so muted text is light-tinted;
     in dark mode the inverse surface is a soft slate, so muted text is dark-tinted.
     Without this any hard-coded rgba(240,242,245,_) renders invisible on the
     dark-mode inverse band. */
  --ink-on-inverse-soft: rgba(240, 242, 245, 0.78);
  --ink-on-inverse-muted: rgba(240, 242, 245, 0.55);
  --ink-on-inverse-faint: rgba(240, 242, 245, 0.18);

  /* Canvas 11-layer stack — trust row fill must stay a dark field; do not use
     --ink-primary here (that token follows body text and inverts in dark mode). */
  --stack-trust-slab-bg: #0A0C0E;
  --stack-trust-slab-fg: #F0F2F5;
  --stack-trust-slab-fg-muted: rgba(240, 242, 245, 0.55);

  /* Semantic — reserved for narrow attestation contexts only */
  --signal-pass: #0F6E3E;
  --signal-warn: #8A6500;
  --signal-fail: #8A1A1A;

  /* ----- Type ----- */
  --font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "EB Garamond 12", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-mono: "Latin Modern Mono", "LM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale (rem) — fluid display via clamp; static body for predictability */
  --fs-display-1: clamp(3.5rem, 8.5vw, 7.5rem);
  --fs-display-2: clamp(2.75rem, 6vw, 5rem);
  --fs-h1: clamp(2.25rem, 4.5vw, 3.25rem);
  --fs-h2: 1.875rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-body: 1.125rem;      /* 18px — bumped from 17px per readability pass */
  --fs-ui: 1rem;            /* 16px */
  --fs-small: 0.875rem;     /* 14px */
  --fs-micro: 0.75rem;      /* 12px */

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.7;
  --lh-ui: 1.5;

  --tracking-display: -0.02em;
  --tracking-heading: -0.018em;
  --tracking-body: -0.005em;
  --tracking-eyebrow: 0.16em;

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

  /* ----- Spacing — 8pt scale ----- */
  --s-0: 0;
  --s-1: 0.25rem;   /* 4 */
  --s-2: 0.5rem;    /* 8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4rem;      /* 64 */
  --s-9: 6rem;      /* 96 */
  --s-10: 8rem;     /* 128 */
  --s-11: 12rem;    /* 192 */

  /* ----- Layout ----- */
  --reading-max: 680px;
  --container-max: 1280px;
  --container-narrow: 960px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 64px;

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --t-instant: 80ms;
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 600ms;
  --t-cinematic: 1200ms;

  /* ----- Elevation ----- */
  --shadow-1: 0 1px 0 rgba(10, 12, 14, 0.04), 0 1px 2px rgba(10, 12, 14, 0.04);
  --shadow-2: 0 6px 18px -8px rgba(10, 12, 14, 0.18);
  --shadow-3: 0 24px 60px -20px rgba(10, 12, 14, 0.28);

  /* ----- Border radius — minimal, Tier-1 deep-tech aesthetic prefers sharp ----- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  /* ----- Z-index scale ----- */
  --z-base: 1;
  --z-rise: 10;
  --z-overlay: 100;
  --z-nav: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* Dark mode — matches brand architecture dark surface specs */
@media (prefers-color-scheme: dark) {
  :root {
    --ink-primary: #F0F2F5;
    --ink-secondary: #B8BDC2;
    --ink-muted: #8B9098;
    --ink-faint: #5C6168;
    --surface-base: #0A0C0E;
    --surface-elevated: #14181C;
    --surface-sunken: #06080A;
    /* Inverse band in dark mode — a muted slate, not a glaring near-white.
       Was #F0F2F5 (read as harsh white against the dark page); the softened
       value keeps strong contrast for primary text (>10:1) without the
       "lightbox" effect. */
    --surface-inverse: #D6DAE0;
    --ink-on-inverse: #0A0C0E;
    /* Flipped sense: muted text on a light inverse must be dark-tinted. */
    --ink-on-inverse-soft: rgba(10, 12, 14, 0.78);
    --ink-on-inverse-muted: rgba(10, 12, 14, 0.62);
    --ink-on-inverse-faint: rgba(10, 12, 14, 0.20);
    --border: #2A2F35;
    --border-strong: #3F4650;
    --accent: #B5C7D8;
    --accent-hover: #D4E0EC;
    --accent-on: #0A0C0E;
    --selection-bg: #B5C7D8;
    --selection-fg: #0A0C0E;
    --stack-trust-slab-bg: #0F2436;
    --stack-trust-slab-fg: #F0F2F5;
    --stack-trust-slab-fg-muted: rgba(240, 242, 245, 0.55);
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
    --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  }
}

/* Honor reduced-motion at the token level so all components inherit */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-instant: 0ms;
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
    --t-cinematic: 0ms;
  }
}