/* ============================================================================
   THE FORT — DESIGN TOKENS
   Three layers: (1) primitives  (2) semantic aliases  (3) component tokens.
   Components reference layers 2/3 only — never raw primitives — so theming is
   a remap of the semantic layer. Dark is the canonical default.
   ============================================================================ */

/* ---- Self-hosted fonts (no network assets) -------------------------------- */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-vf.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk var";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-vf.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* ======================================================================
     LAYER 1 — PRIMITIVES (palette; never used directly by components)
     ====================================================================== */

  /* Background elevation ladder: graphite, deep gray, and light contrast */
  --p-bg-base: #080b10;
  --p-bg-sunken: #11161d;
  --p-bg-1: #eef1f5;
  --p-bg-2: #151a21;
  --p-surface-1: #1d232b;
  --p-surface-2: #262d36;

  /* Hairlines & borders */
  --p-hairline: rgba(245, 247, 250, 0.07);
  --p-border: rgba(245, 247, 250, 0.13);
  --p-border-strong: rgba(245, 247, 250, 0.24);
  --p-border-bevel: rgba(255, 255, 255, 0.08);

  /* Text tiers */
  --p-text: #f5f7fa;
  --p-text-secondary: #c7cdd7;
  /* muted brightened and faint raised to the old muted value so BOTH tiers
     clear WCAG AA (>=4.5:1) on every surface, including the lighter cards. */
  --p-text-muted: #aab2bf;
  --p-text-faint: #7d8796;
  --p-text-on-accent: #f8fbff;
  --p-text-on-paper: #11161d;

  /* Primary signal from the icon */
  --p-mint: #2563eb;
  --p-mint-bright: #69a7ff;
  --p-mint-deep: #123a94;
  --p-mint-glow: rgba(37, 99, 235, 0.42);
  --p-mint-wash: rgba(37, 99, 235, 0.12);

  /* interface / structural (cool blue) */
  --p-steel: #7aa6f8;
  --p-steel-bright: #b9d2ff;
  --p-steel-deep: #1f4eb6;
  --p-steel-glow: rgba(37, 99, 235, 0.30);
  --p-steel-wash: rgba(37, 99, 235, 0.09);

  /* review / held-for-human states (platinum) */
  --p-amber: #c9d0dc;
  --p-amber-bright: #f5f7fa;
  --p-amber-deep: #4f5866;
  --p-amber-glow: rgba(245, 247, 250, 0.24);
  --p-amber-wash: rgba(245, 247, 250, 0.08);

  /* refusal (rose) */
  --p-rose: #e8767f;
  --p-rose-bright: #f0929a;
  --p-rose-deep: #8a2f37;
  --p-rose-glow: rgba(232, 118, 127, 0.30);
  --p-rose-wash: rgba(232, 118, 127, 0.08);

  /* Paper (printed-record rhythm section) */
  --p-paper: #eef1f5;
  --p-paper-2: #dbe1e9;
  --p-paper-line: rgba(21, 32, 29, 0.12);

  /* Structural gradients (low-contrast plane lighting — not decorative blobs) */
  --p-grad-plane: radial-gradient(120% 80% at 50% -10%, rgba(37, 99, 235, 0.12), transparent 62%);
  --p-grad-signal-mint: linear-gradient(180deg, #69a7ff, #2563eb 62%, #1747b8);
  --p-grad-edge: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.52), rgba(245, 247, 250, 0.36), transparent);

  /* ======================================================================
     Type primitives
     ====================================================================== */
  --font-display: "Space Grotesk var", "Inter var", system-ui, sans-serif;
  --font-body: "Inter var", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 2.75rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-lede: clamp(1.15rem, 1rem + 0.7vw, 1.4375rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-mono-label: 0.75rem;
  --fs-mono-data: 0.8125rem;

  --lh-display: 0.96;
  --lh-h2: 1.05;
  --lh-h3: 1.2;
  --lh-body: 1.6;

  --tr-display: 0;
  --tr-h2: 0;
  --tr-label: 0.14em;
  --tr-data: 0.02em;

  /* ======================================================================
     Spacing scale (4px base)
     ====================================================================== */
  --space-0: 2px;
  --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;

  /* Layout */
  --container: 1360px;
  --container-narrow: 760px;
  --container-wide: 1360px;
  --gutter: clamp(20px, 4vw, 48px);
  --grid-gap: 24px;
  --section-pad: clamp(var(--space-8), 8vw, var(--space-9));
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --header-h: 68px;

  /* ======================================================================
     Motion primitives
     ====================================================================== */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-precise: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* ======================================================================
     LAYER 2 — SEMANTIC ALIASES (components reference these)
     ====================================================================== */
  --color-bg: var(--p-bg-base);
  --color-bg-sunken: var(--p-bg-sunken);
  --color-band-1: var(--p-bg-1);
  --color-band-2: var(--p-bg-2);
  --color-surface: var(--p-surface-1);
  --color-surface-raised: var(--p-surface-2);

  --color-hairline: var(--p-hairline);
  --color-border: var(--p-border);
  --color-border-strong: var(--p-border-strong);
  --color-bevel: var(--p-border-bevel);

  --color-text: var(--p-text);
  --color-text-secondary: var(--p-text-secondary);
  --color-text-muted: var(--p-text-muted);
  --color-text-faint: var(--p-text-faint);
  --color-text-on-accent: var(--p-text-on-accent);

  --accent-positive: var(--p-mint);
  --accent-positive-bright: var(--p-mint-bright);
  --accent-positive-glow: var(--p-mint-glow);
  --accent-positive-wash: var(--p-mint-wash);

  --accent-interface: var(--p-steel);
  --accent-interface-bright: var(--p-steel-bright);
  --accent-interface-glow: var(--p-steel-glow);
  --accent-interface-wash: var(--p-steel-wash);

  --accent-review: var(--p-amber);
  --accent-review-bright: var(--p-amber-bright);
  --accent-review-glow: var(--p-amber-glow);
  --accent-review-wash: var(--p-amber-wash);

  --accent-refusal: var(--p-rose);
  --accent-refusal-bright: var(--p-rose-bright);
  --accent-refusal-glow: var(--p-rose-glow);
  --accent-refusal-wash: var(--p-rose-wash);

  --grad-plane: var(--p-grad-plane);
  --grad-edge: var(--p-grad-edge);

  /* Focus ring — steel, so amber stays reserved for "review" semantics */
  --focus-ring: var(--p-steel);

  /* ======================================================================
     Elevation / lighting model (depth from light + hairlines, not big shadow)
     ====================================================================== */
  --elev-flush: 0 0 0 0 rgba(0, 0, 0, 0);
  --elev-raised:
    inset 0 1px 0 var(--p-border-bevel),
    0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-float:
    inset 0 1px 0 var(--p-border-bevel),
    0 16px 40px -16px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* prefers-contrast: firm up hairlines for low-vision users */
@media (prefers-contrast: more) {
  :root {
    --color-hairline: var(--p-border);
    --color-border: var(--p-border-strong);
  }
}