/* ============================================================
   DESIGN TOKENS — the single source of truth for the site's look.
   Components in style.css / case.css only reference these; to restyle
   the site, change a value here, not a number in a component.
   ============================================================ */

:root {
  /* ---------- colour ---------- */
  --bg: #0d0e0c;
  --bg-soft: #131511;
  --panel: #181a16;
  --ink: #e8e6e1;
  --ink-dim: rgba(232, 230, 225, 0.6);    /* secondary text: passes 4.5:1 on --bg */
  --ink-faint: rgba(232, 230, 225, 0.4);  /* decorative only (numbers, hints): never essential text */
  --line: rgba(232, 230, 225, 0.12);
  --line-soft: rgba(232, 230, 225, 0.07);
  --accent: #d6fb41;
  --accent-ink: #131509;                  /* text on top of --accent */
  --accent-line: rgba(214, 251, 65, 0.4);
  --accent-wash: rgba(214, 251, 65, 0.1);

  /* ---------- type: families ---------- */
  --font-display: "Clash Display", "Arial Black", sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  /* ---------- type: sizes ----------
     Small uppercase labels use exactly two sizes: micro (tags, chips, captions)
     and label (section labels, nav, meta). Controls (buttons, links) use control. */
  --fs-micro: 10px;
  --fs-label: 11px;
  --fs-control: 12px;
  --fs-body: 17px;
  --fs-body-sm: 15.5px;
  --fs-display-hero: clamp(64px, 14.5vw, 218px);
  /* "LET'S BUILD SOMETHING" measures 12.53em: 7vw keeps it on one line inside the container at every
     width (needs <= 7.35vw). Phones (<= 520px) override this in style.css and let line 1 wrap. */
  --fs-display-contact: clamp(28px, 7vw, 112px);
  --fs-lead: clamp(18px, 1.35vw, 21px);               /* the one sentence a section wants read first */
  --fs-h2: clamp(40px, 6.4vw, 96px);
  --fs-statement: clamp(26px, 2.7vw, 40px);          /* About statement: two lines beside the photo */
  --fs-h3: clamp(26px, 3.6vw, 54px);
  --fs-card-title: clamp(24px, 2.3vw, 32px);
  --fs-stat: clamp(30px, 3vw, 42px);

  /* ---------- type: rhythm ---------- */
  --ls-label: 0.14em;
  --ls-control: 0.12em;
  --ls-display: -0.01em;
  /* Clash Display's built-in space is only ~0.15em, which with tightened letters made words
     in big headings nearly touch. This brings it to ~0.25em, the usual comfortable width. */
  --ws-display: 0.1em;

  /* ---------- spacing: 4-point scale ---------- */
  --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;

  /* ---------- spacing: layout roles ---------- */
  --gutter: clamp(20px, 3.5vw, 64px);                 /* nav side padding */
  --container: min(1480px, 100% - clamp(40px, 7vw, 128px));
  --section-pad: clamp(72px, 8vw, 128px);             /* each side of the hairline between sections */
  --head-gap: clamp(48px, 6vw, 88px);                 /* section header -> section content */
  --label-gap: var(--space-5);                        /* "01 — LABEL" -> whatever follows, in EVERY section */
  --nav-h: 76px;
  --hero-peek: clamp(48px, 8svh, 88px);               /* how much of the next band shows above the fold */

  /* ---------- radius: three sizes + pill ---------- */
  --radius-sm: 8px;      /* small marks, screenshots */
  --radius-md: 14px;     /* panels, photos, illustrations */
  --radius-lg: 20px;     /* cards */
  --radius-pill: 100px;  /* chips, buttons */

  /* ---------- icons ---------- */
  --icon-sm: 12px;
  --icon-md: 16px;
  --icon-lg: 20px;

  /* ---------- layers ---------- */
  --z-grain: 90;
  --z-menu: 99;
  --z-nav: 100;
  --z-burger: 130;
  --z-cursor: 150;
  --z-preloader: 200;

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.4s;
  --dur-slow: 0.6s;
}