/* LetMeCodeThat — design tokens */
:root {
  /* Brand */
  --accent: #F7CE14;
  --accent-hover: #FFE05C;
  --navy: #243673;
  --navy-deep: #1B2A5A;
  --on-navy: #BFD1FF;
  --green: #4ADE80; /* status tags only, e.g. "Launching soon" */

  /* Grounds */
  --bg: #161616;
  --bg-deep: #000000;
  --bg-panel-muted: #242424; /* ground for a real screenshot or diagram in a
                                 project tile -- reads better behind a
                                 photographed screen than --navy does */
  --ink-on-accent: #333333;
  --ink-on-accent-muted: #4A4030;

  /* Text */
  --fg: #FFFFFF;
  --fg-body: #E7E7E7;
  --fg-muted: #B9B9B9;
  --fg-dim: #9E9E9E;
  --fg-faint: #8C8C8C;
  --fg-ghost: #707070;
  --fg-quiet: #6B6B6B;

  /* Lines */
  --line: rgba(231, 231, 231, 0.12);
  --line-soft: rgba(231, 231, 231, 0.09);
  --line-strong: rgba(231, 231, 231, 0.22);

  /* Type */
  --font-display: Archivo, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The floor is tuned to whichever hero line is widest. That is now the
     ENGLISH "I've got the how." at ~9.2em; the Dutch "Ik regel de hoe." is
     ~8.7em (it was the widest at ~9.4em back when it read "het hoe").
     At 34px the intended three lines hold from 360px up in both languages;
     narrower than that the last line wraps to two, which is fine (no
     overflow). 36px would wrap English at 360px, so do not raise it without
     re-measuring. Re-measure whenever either headline changes. */
  --step-hero: clamp(34px, 8.4vw, 126px);
  --step-story: clamp(25px, 4.4vw, 56px);
  --step-h2: clamp(28px, 4vw, 50px);
  --step-h2-lg: clamp(34px, 7vw, 96px);
  --step-h3: clamp(22px, 2.4vw, 31px);
  --step-lead: clamp(16px, 1.5vw, 21px);
  --step-label: 11.5px;

  /* Space */
  --gutter: clamp(18px, 5vw, 48px);
  --section-y: clamp(76px, 12vh, 144px);
  --content: 1240px;
  --content-narrow: 1020px;

  /* Radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 700ms;
  --dur-fast: 260ms;

  /* Breakpoint reference (JS reads this value too) */
  --bp-compact: 880px;
}