/* ==========================================================================
   Hey Shalin — design tokens
   The ONLY file where a colour value may appear. Every other style uses
   var(--…). Locked design system: dark, green-led, square corners, 1px
   borders, no shadows, no gradients.
   ========================================================================== */

:root {
  /* ---- Colours: surfaces ---------------------------------------------- */
  --c-page: #061F1A;        /* page background (~40%) */
  --c-surface: #0B2E27;     /* cards, How it works (~14%) */
  --c-emerald: #036351;     /* "Hey, I'm Shalin" band (~13%) */
  --c-deepest: #03140F;     /* nav, footer (~8%) */
  --c-border: #2A6B5C;      /* all 1px borders */

  /* ---- Colours: accents ----------------------------------------------- */
  --c-mint: #86CEBB;        /* We do tiles, labels, accent words, quotes */
  --c-lime: #CEDC85;        /* buttons + You do tiles ONLY. Lime = click */
  --c-watermelon: #FF3D6C;  /* accents only: squiggle, highlight, arrows,
                               quote marks, confetti. Never large areas. */

  /* ---- Colours: text -------------------------------------------------- */
  --c-cream: #FFF0E3;             /* default text on dark */
  --c-muted: #5E8F82;             /* muted text on --c-page / --c-deepest only */
  --c-muted-on-emerald: #BFE6DA;  /* muted text on --c-emerald and --c-surface */
  --c-ink: #012E26;               /* text on mint, lime and watermelon */

  /* ---- Semantic aliases (use these in components) -------------------- */
  --bg: var(--c-page);
  --fg: var(--c-cream);
  --fg-muted: var(--c-muted);
  --fg-soft: var(--c-muted-on-emerald);
  --focus-ring: var(--c-mint);
  --selection-bg: var(--c-mint);
  --selection-fg: var(--c-ink);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  --display-settings: "SOFT" 100, "WONK" 0;   /* Fraunces axes */
  --display-opsz: 144;                        /* Fraunces optical size */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --tracking-tight: -0.02em;   /* headlines */
  --tracking-normal: 0;
  --tracking-label: 0.14em;    /* YOU DO / WE DO / TRUSTED BY */

  /* Fluid type scale (375px → 1280px). Body never below 16px. */
  --fs-xs: 0.75rem;                                      /* 12px: labels only */
  --fs-sm: 0.875rem;                                     /* 14px: small lines */
  --fs-base: 1rem;                                       /* 16px */
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17–19px */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);       /* 20–24px */
  --fs-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);         /* 24–32px */
  --fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);      /* 30–44px */
  --fs-display: clamp(2.375rem, 1.6rem + 3.4vw, 4rem);   /* 38–64px */
  --fs-prize: clamp(2.5rem, 1.8rem + 4vw, 4.5rem);       /* quiz count-ups */

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.55;

  --measure: 70ch;            /* max line length */

  /* ---- Spacing (4px base) -------------------------------------------- */
  --sp-1: 0.25rem;   /* 4 */
  --sp-2: 0.5rem;    /* 8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 2.5rem;    /* 40 */
  --sp-8: 3rem;      /* 48 */
  --sp-9: 4rem;      /* 64 */
  --sp-10: 5rem;     /* 80 */
  --sp-11: 6rem;     /* 96 */
  --sp-12: 8rem;     /* 128 */

  --gutter: var(--sp-4);                 /* 16px side gutter on mobile */
  --section-y: clamp(var(--sp-7), 6vw, var(--sp-10));
  --container: 1232px;
  --container-narrow: 760px;
  --tap: 44px;                           /* minimum tap target */
  --nav-h: 64px;
  --sticky-bar-h: 76px;

  /* ---- Borders & shape ----------------------------------------------- */
  --bw: 1px;
  --bw-thick: 2px;
  --radius: 0;                           /* sharp corners everywhere */
  --border: var(--bw) solid var(--c-border);

  /* ---- Focus ---------------------------------------------------------- */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---- Motion --------------------------------------------------------- */
  --dur-fast: 150ms;      /* hovers, presses */
  --dur-fade: 600ms;      /* review crossfade */
  --dur-reveal: 450ms;    /* reveals on the main site */
  --dur-quiz: 550ms;      /* quiz screens and prize cards only */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Layers --------------------------------------------------------- */
  --z-sticky-bar: 50;
  --z-nav: 60;
  --z-quiz: 100;
  --z-confetti: 110;
  --z-skip-link: 200;

  /* Breakpoints (reference only; custom properties can't be used in
     @media). Tablet: 768px. Strip goes horizontal: 1024px. Desktop: 1280px. */

  color-scheme: dark;
}