/* tokens.css — Design tokens for the entire site.
 * Source of truth for typography, color, surfaces, motion, and spacing.
 * Loaded BEFORE site.css. All other CSS consumes from here — no literals.
 *
 * Two typography variants live here behind the same --font-* variables.
 * To switch from Variant 1 (Source Serif + Plex) to Variant 2 (Geist),
 * comment out the Variant 1 @font-face block + variable assignments
 * and uncomment Variant 2.
 */

/* ========================================================================
 * Typography — Variant 1: Source Serif 4 (display) + IBM Plex Sans (body)
 * + IBM Plex Mono (code). Self-hosted variable WOFF2.
 * ======================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-variable-roman.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-variable-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-variable-roman.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-variable-italic.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ----- Variant 2: Geist Sans + Geist Mono (FALLBACK, commented out) -----
 *
 * To activate: comment out the Variant 1 @font-face block above and
 * the Variant 1 --font-display / --font-body / --font-mono assignments
 * in :root, then uncomment everything below. */
 
  @font-face {
    font-family: "Geist";
    src: url("/assets/fonts/geist-variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
 
  @font-face {
    font-family: "Geist Mono";
    src: url("/assets/fonts/geist-mono-variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
 

:root {
  color-scheme: dark;

  /* ---------- Type families ---------- */
  --font-display: "Source Serif 4", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Variant 2 (Geist) — uncomment to activate, and comment the three above:
    --font-display: "Geist", system-ui, -apple-system, sans-serif;
   --font-body:    "Geist", system-ui, -apple-system, sans-serif;
    --font-mono:    "Geist Mono", "SF Mono", Menlo, monospace;
   */

  /* ---------- Type scale (1.25 ratio off ~18px base) ----------
   * Body anchors at 1.0625rem (~17px) min, 1.1875rem (~19px) max.
   * Headings step from there: h3 = 1.4×, h2 = 1.85×, h1 = 2.6×.
   * Hero h2 (display lead) gets its own scale because it's load-bearing.
   */
  --fs-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-small: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.15vw, 0.82rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  --fs-h2: clamp(1.65rem, 1.4rem + 1.1vw, 2.1rem);
  --fs-h1: clamp(2.1rem, 1.7rem + 1.8vw, 3rem);
  --fs-display: clamp(2.25rem, 1.8rem + 2.4vw, 3.75rem);

  /* Line heights — unitless so they cascade. */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --lh-prose: 1.7;

  /* Tracking — used sparingly, only on uppercase. */
  --tracking-eyebrow: 0.32em;
  --tracking-nav: 0.18em;
  --tracking-label: 0.12em;

  /* Measure (line length cap for prose). */
  --measure-prose: 68ch;
  --measure-content: 960px;
  --measure-wide: 1200px;

  /* ---------- Color: surfaces & ink ---------- */
  --bg-dark: #20202d;
  /* --bg-dark: #16161e; */ /* alternate flat dark — swap in to lose the gradient */
  --bg-gradient: radial-gradient(circle at 20% 55vh, #2c2c3a 0%, #12121a 1000px);
  --content-inner-gradient: radial-gradient(circle at 20% 55vh, #2c2c3aa1 0%, #12121a 1000px);

  --text-light: #f4efe2;
  --text-muted: rgba(244, 239, 226, 0.7);
  --text-faint: rgba(244, 239, 226, 0.5);
  --text-dim: rgba(244, 239, 226, 0.65);
  --text-strong: rgba(244, 239, 226, 0.85);

  /* Primary accent — warm amber. Used for CTAs, links, pulses, glows. */
  --accent: #eaa01c;
  --accent-soft: rgba(234, 160, 28, 0.65);
  --accent-glow: rgba(234, 160, 28, 0.35);
  --accent-bright: rgba(234, 160, 28, 0.95);
  --accent-dark: rgba(128, 72, 10, 0.9);
  --accent-faint: rgba(234, 160, 28, 0.20);
  --accent-text: #1a1208;

  /* Secondary accent — cool sky/proof. Used ONLY on verification states,
   * spec-snippet keywords, and the "logical" side of any duality treatment.
   * Never compete with amber for primary attention. */
  --accent-cool: #9ec9d6;
  --accent-cool-soft: rgba(158, 201, 214, 0.65);
  --accent-cool-glow: rgba(158, 201, 214, 0.3);
  --accent-cool-faint: rgba(158, 201, 214, 0.18);

  --surface-glass: rgba(32, 32, 45, 0.85);
  --surface-veil: rgba(44, 32, 25, 0.6);
  --surface-medium: rgba(52, 50, 64, 0.9);
  --surface-dark-subtle: rgba(18, 18, 26, 0.4);
  --surface-card: rgba(28, 28, 38, 0.92);

  --shadow-strong: rgba(16, 16, 24, 0.65);
  --shadow-soft: rgba(16, 16, 24, 0.45);
  --shadow-deep: rgba(10, 8, 20, 0.55);

  --button-shadow: rgba(234, 160, 28, 0.25);

  /* ---------- Spacing & radius ----------
   * All zero — design language is square-edged. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 0;

  /* ---------- Motion timing (consumed by motion.css when enabled) ---------- */
  --ease-out: cubic-bezier(0.18, 0.72, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 0.85s;
  --duration-base: 1.45s;
  --duration-slow: 2.8s;

  --reveal-distance: 18px;
}

/* ========================================================================
 * Global typographic baseline.
 * Anything inheriting from <body> gets these unless overridden.
 * ======================================================================== */
html {
  font-family: var(--font-body);
  font-size: 16px;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 450;
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 0, "liga" 0;
}