Brand

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Brand */
  --lime:    #ccff00;   /* fills only: buttons, highlights, the ghost */
  --on-lime: #0b0b0b;

  /* Surfaces */
  --bg:            light-dark(#f6f6f6, #0b0b0b);
  --surface:       light-dark(#ffffff, #151515);
  --surface-2:     light-dark(#eeeeee, #1f1f1f);
  --border:        light-dark(#e0e0e0, #2b2b2b);
  --border-strong: light-dark(#c6c6c6, #3a3a3a);
  /* Inverse bands: near-black on a light page; lifted above page and raised
     bands on a dark one, with a faint edge so the step reads. */
  --inverse-bg:        light-dark(#0b0b0b, #242424);
  --inverse-surface:   light-dark(#151515, #2e2e2e);
  --inverse-surface-2: light-dark(#1f1f1f, #383838);
  --inverse-border:    light-dark(#2b2b2b, #404040);
  --inverse-edge:      light-dark(transparent, #3a3a3a);

  /* Text */
  --text:           light-dark(#111111, #fafafa);
  --text-secondary: light-dark(#5c5c5c, #a6a6a6);
  --text-muted:     light-dark(#6b6b6b, #8c8c8c);  /* AA on --bg and --surface in both themes */

  /* Accent: readable lime-family colour for text, icons and rules */
  --accent:        light-dark(#4b5f00, #ccff00);
  --accent-wash:   light-dark(#eef6c8, rgba(204, 255, 0, .10));
  --accent-border: light-dark(#cfe07e, rgba(204, 255, 0, .22));

  /* Inverted fill for primary buttons and highlighted markers */
  --ink:    light-dark(#111111, #fafafa);
  --on-ink: light-dark(#fafafa, #111111);
  --ink-accent: light-dark(#ccff00, #111111);  /* accent detail on --ink (button arrows, step numbers) */

  /* Feedback */
  --danger:      light-dark(#c0341d, #ff5050);
  --danger-text: light-dark(#b3301b, #ff6464);
  --warn:        light-dark(#8a4b00, #ffa03c);

  --focus-ring: var(--accent);

  /* Highlighter under key words in headings: a lime marker on light, lime text on dark */
  --mark-fill: light-dark(#ccff00, transparent);
  --mark-text: light-dark(#111111, #ccff00);

  /* Feasibility pills (Quickscan report): Goed / Beperkt / Onzeker / n.v.t. */
  --pill-good-bg:     light-dark(#e3f2c0, rgba(204, 255, 0, .14));
  --pill-good-text:   light-dark(#33430a, #d9ff66);
  --pill-limited-bg:  light-dark(#fbead3, rgba(255, 160, 60, .16));
  --pill-limited-text:light-dark(#7a4300, #ffbe7a);
  --pill-unsure-bg:   light-dark(#f6dcd8, rgba(255, 90, 70, .16));
  --pill-unsure-text: light-dark(#8a2a1c, #ff9a8a);

  /* Typography — three roles, three faces.
     Archivo is wide and sturdy at hero weight; Geist stays quiet underneath it;
     Martian Mono is broad, so labels carry far less tracking than a narrow mono
     would need (see --track-label / --track-loose below). */
  --font-display: var(--font-archivo);
  --font:         var(--font-geist);
  --font-mono:    var(--font-martian);

  /* Font weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Type scale — rem, so text follows the visitor's browser font size */
  /* The mock-ups these came from were only ever looked at zoomed out on a
     design canvas, where 60px reads as a comfortable heading; at 1:1 on a real
     screen the same numbers shout. The whole display end came down roughly a
     quarter, against an unchanged 16px body. */
  --fs-hero:       clamp(2.125rem, 1.7562rem + 1.529vw, 2.875rem);  /* 34 → 46px, home only */
  --fs-title:      clamp(1.875rem, 1.6rem + 1.15vw, 2.5rem);        /* 30 → 40px, every other page's h1 */
  --fs-section:    clamp(1.75rem, 1.5916rem + 0.634vw, 2.125rem);   /* 28 → 34px */
  --fs-heading:    1.5rem;                                          /* 24px, headings inside a page */
  --fs-step:       clamp(1.375rem, 1.2556rem + 0.493vw, 1.625rem);  /* 22 → 26px, one big feature card or row per section */
  /* Card titles: two sizes only. Small = a compact card in a dense list or a
     sidebar; large = a card in a 2- or 3-column grid. Use .h-card / .h-card-lg. */
  --fs-card:       clamp(1.0625rem, 1.025rem + 0.125vw, 1.125rem);  /* 17 → 18px */
  --fs-card-lg:    clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);          /* 20 → 24px */
  --fs-lead:       clamp(0.9375rem, 0.9062rem + 0.125vw, 1rem);     /* 15 → 16px */
  --fs-subheading: 0.9375rem;
  --fs-body:       0.9375rem;
  --fs-body-sm:    0.8125rem;
  --fs-label:      0.75rem;
  --fs-meta:       0.6875rem;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-relaxed: 1.75;

  /* Letter spacing */
  --track-tight:   -0.035em;
  --track-display: -0.03em;
  --track-label:    0.01em;   /* Martian Mono is wide enough on its own */
  --track-loose:    0.02em;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Layout */
  --pad:   clamp(20px, 8.33vw, 120px);
  /* Includes --pad, so the content is this minus two 120px gutters: 1200px on
     a wide screen, which is the column the mock-ups were drawn on. Narrowing
     it made the page feel tighter rather than calmer — the type is what was
     too large, not the column. */
  --max-w: 1440px;
  --nav-h: 72px;
  --band-y: clamp(72px, 10vw, 140px);  /* vertical padding of a page section */
  --page-top: clamp(40px, 5vw, 64px);  /* space above and below a page header (<PageHeader>) */

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
  /* Roles — use these, not raw px: a card or panel that sits in a section,
     anything inside it (a tab, an inner card, a list row), and form controls,
     square chips and icon tiles. */
  --radius-card:    18px;
  --radius-control: 10px;
  /* Speech bubbles are 16px with one 4px corner, the tail, pointing at the ghost. */

  /* Card padding: a card in a grid or list, and the one big panel a section
     is built around. */
  --pad-card:  clamp(20px, 2.2vw, 28px);
  --pad-panel: clamp(24px, 3vw, 40px);

  /* Shadows — soft on light, deep on dark */
  --shadow-card-hover: 0 8px 32px light-dark(rgba(17, 17, 17, .08), rgba(0, 0, 0, .45));
  --shadow-nav:        0 1px 0 var(--border), 0 8px 32px light-dark(rgba(17, 17, 17, .06), rgba(0, 0, 0, .6));
  --shadow-swatch:     0 4px 16px light-dark(rgba(17, 17, 17, .10), rgba(0, 0, 0, .5));
  --shadow-float:      0 16px 40px light-dark(rgba(17, 17, 17, .10), rgba(0, 0, 0, .5));
  --ring-accent:       0 0 0 1px var(--accent-border);

  /* Motion */
  --dur-fast:  0.15s;
  --dur-base:  0.2s;
  --dur-slow:  0.3s;
  --dur-enter: 0.65s;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --blur-nav:   blur(12px);
}