/**
 * ============================================================================
 * DESIGN TOKENS
 * ============================================================================
 * Every color, font, spacing and motion value used anywhere on the site is
 * defined here as a CSS custom property. If you want to re-theme the whole
 * site (e.g. shift the grays, swap fonts, change the corner-cut size),
 * this is the only file you should need to touch.
 * ============================================================================
 */

:root {

  /* ---------- Color: monochrome, blade-and-steel palette ------------- */
  --c-void:        #0a0a0b;   /* page background */
  --c-charcoal:    #131316;   /* alternate section background */
  --c-charcoal-2:  #1a1a1e;   /* card / raised surface background */
  --c-steel:       #2b2b30;   /* borders, dividers, resting lines */
  --c-steel-soft:  #3c3c42;   /* hover borders, stronger dividers */
  --c-ash:         #86868f;   /* muted / secondary text */
  --c-fog:         #c9c9cf;   /* body text */
  --c-bone:        #f2f2f0;   /* headings, high-emphasis text */
  --c-white:       #ffffff;   /* pure white — reserved for accents & glints */
  --c-black:       #000000;

  /* ---------- Type -----------------------------------------------------
     Display: tall condensed face for headlines — reads like a blade edge.
     Body:    neutral, highly legible face for paragraphs and UI text.
     Mono:    utility face for labels, stats, nav chapters, timestamps.
  ------------------------------------------------------------------- */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --fs-hero:  clamp(3.2rem, 13vw, 9.5rem);
  --fs-h1:    clamp(2.4rem, 6vw, 4.2rem);
  --fs-h2:    clamp(1.9rem, 4.4vw, 2.9rem);
  --fs-lead:  clamp(1.05rem, 2vw, 1.3rem);
  --fs-body:  1rem;
  --fs-small: 0.85rem;
  --fs-micro: 0.72rem;

  --lh-tight: 1.05;
  --lh-normal: 1.6;

  --ls-display: 0.01em;
  --ls-mono: 0.14em;

  /* ---------- Spacing ---------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  --space-lg:  clamp(3rem, 6vw, 5rem);
  --space-xl:  clamp(5rem, 12vw, 9rem);

  /* ---------- Layout -------------------------------------------------- */
  --container-w: 1160px;
  --header-h: 68px;
  --corner-cut: 14px;          /* size of the angular "cut corner" look */
  --corner-cut-sm: 8px;

  --border-hair: 1px solid var(--c-steel);
  --border-hair-soft: 1px solid var(--c-steel-soft);

  /* ---------- Motion --------------------------------------------------- */
  --ease-blade:   cubic-bezier(0.7, 0, 0.15, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 180ms;
  --dur-med:  360ms;
  --dur-slow: 600ms;

  /* ---------- Elevation / glow ----------------------------------------- */
  --glow-soft: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 40px -20px rgba(0, 0, 0, 0.8);
  --glow-hover: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 48px -20px rgba(0, 0, 0, 0.9);
}