/* Design tokens. Source: SPEC §2 (colour 2.1, type 2.2, shape 2.3).
   Every colour in the site must come from a token below. Do not add raw hex in pages. */
:root {
  /* §2.1 Colour */
  --brand-yellow: #FBCC35;   /* primary action, accents on dark, header underline. Always ink text on it. */
  --brand-magenta: #EA038A;  /* LARGE display text only (>= 24px) */
  --magenta-text: #B8006A;   /* magenta for small text and links on light */
  --magenta-deep: #A1005D;   /* eyebrows on yellow tints, link hover */
  --ink: #111111;
  --ground: #F2EFEA;
  --surface: #FFFFFF;
  --text-body: #3D3A37;
  --text-muted: #66615B;
  --on-dark: #FFFFFF;
  --on-dark-muted: #D9D4CC;
  --dark-2: #222222;
  --dark-3: #2C2C2C;
  --border: #E4DED6;
  --border-strong: #DDD5CA;
  --border-dashed: #D2C9BC;
  --tint-yellow: #FFF3CC;
  --tint-cream: #FAF6EC;
  --tint-pink: #FDE4F1;
  --pink-text: #A3005C;
  --success: #1F5E43;
  --success-tint: #E3F1E9;
  --warning: #8A5300;
  --danger: #B3361F;

  /* Derived, from the mock-ups */
  --disabled-bg: #C9C2B8;        /* submit button when blocked (SPEC §8.1) */
  --outline-on-dark: #555555;    /* chips and dashed slots on ink (mock-up) */

  /* §2.2 Type */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --fs-h1: clamp(48px, 6.4vw, 88px);
  --fs-h2: clamp(34px, 4.6vw, 60px);
  --fs-h2-sm: clamp(34px, 4.4vw, 54px);  /* section H2 used by most Home sections */
  --fs-h3: clamp(22px, 2.4vw, 32px);
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 13px;

  /* §2.3 Shape, spacing, elevation */
  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-card-lg: 26px;
  --radius-input: 12px;
  --radius-chip: 16px;
  --content-max: 1240px;
  --content-max-wide: 1280px;
  --gutter: 24px;
  --section-pad: 88px;
  --shadow-float: 0 12px 40px rgba(17, 17, 17, .22);
  --focus-ring: 3px solid var(--magenta-text);
  --target: 44px;
  --header-h: 99px; /* 76px logo + 2x10px padding + 3px border; used for scroll-margin */
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --section-pad: 60px;
  }
}