/* =============================================================================
   tokens.css — DESIGN TOKENS (the single source of truth for the look)
   Change a value here and it updates everywhere. Nothing else in the CSS
   hard-codes colours, radii or fonts.
   ========================================================================== */
:root {
  /* ---- Colour: neutrals ---- */
  --bg:        #fafafa;            /* page background */
  --bg-2:      #f0f0f0;            /* cards / pills on light */
  --ink:       #0f0f0f;            /* primary text + dark panels */
  --ink-2:     #1b1b1b;            /* raised dark surface */
  --ink-3:     #262626;
  --muted:     rgba(15, 15, 15, .46);
  --line:      rgba(15, 15, 15, .10);
  --on-dark:   #f5f5f5;
  --on-dark-muted: rgba(245, 245, 245, .55);
  --line-dark: rgba(255, 255, 255, .10);

  /* ---- Colour: the "pop" palette ---- */
  --volt:      #d4ff3a;            /* acid lime — primary accent */
  --blue:      #3a3cff;            /* electric ultramarine */
  --pink:      #ff3ea5;
  --orange:    #ff6a2b;
  --ice:       #dfe9ff;

  /* ---- Typography ---- */
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Brand wordmark face: chunky soft-slab (Cooper-style). Used ONLY for the BennieTech name. */
  --font-brand: "Shrikhand", "Cooper Black", "Bowlby One", Georgia, serif;
  /* Wordmark layer colours, nearest layer first (cyan, green, yellow, pink) */
  --wm-1: #4fe0e6; --wm-2: #7fc86a; --wm-3: #ffd04d; --wm-4: #f2c4dc;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale (min, preferred, max) */
  --fs-display: clamp(3rem, 9.2vw, 9.5rem);
  --fs-h2:      clamp(2.25rem, 5.6vw, 5.25rem);
  --fs-h3:      clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-lede:    clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-body:    1rem;
  --fs-mono:    .75rem;

  /* ---- Shape & space ---- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;
  --gutter: clamp(16px, 3vw, 40px);
  --container: 1440px;
  --section-y: clamp(4.5rem, 11vw, 9.5rem);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* snappy, luxurious deceleration */
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --dur: .9s;

  /* ---- Layering ---- */
  --z-nav: 100;
  --z-menu: 90;

  /* ---- Depth ---- */
  --shadow-tile: 0 30px 60px -20px rgba(0,0,0,.45), 0 10px 20px -10px rgba(0,0,0,.35);
  --shadow-card: 0 1px 0 rgba(255,255,255,.8) inset, 0 20px 50px -30px rgba(0,0,0,.25);
}