/* ModulBid design tokens — the single source for colour, type, space, radius,
   elevation and motion. Components read only these variables. */
:root {
  /* Colour — neutrals */
  --c-white: #FFFFFF;
  --c-paper: #F7F7F5;          /* off-white section ground */
  --c-mist: #F2F2EF;           /* light neutral fills */
  --c-line: #E5E5E2;           /* hairline borders */
  --c-line-strong: #D2D2CD;
  --c-ink: #111111;            /* primary text */
  --c-ink-soft: #77776F;       /* large secondary headline text (≥ 3:1) */
  --c-muted: #666666;          /* secondary body text, 5.7:1 on white */
  --c-dark: #141414;           /* dark surfaces (matches logo black) */
  --c-dark-raised: #1D1D1C;
  --c-dark-line: rgba(255, 255, 255, .12);
  --c-on-dark: #F7F7F5;
  --c-on-dark-muted: #A3A3A0;  /* 7.4:1 on --c-dark */

  /* Colour — brand red. One red, taken from the official logo (#A81C12).
     Variations exist only for hover, dark surfaces and semantic tints. */
  --c-red: #A81C12;            /* 7.4:1 on white — text-safe */
  --c-red-hover: #8F170F;      /* hover / pressed on light grounds */
  --c-red-on-dark: #EE5F52;    /* small red text / strokes on dark, 5.7:1 */
  --c-red-tint: #F8EAE8;       /* BLOCKER chip fill */
  --c-red-glow: rgba(168, 28, 18, .16);

  /* Typography */
  --f-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-display: clamp(2.25rem, 1.05rem + 5vw, 4.75rem);   /* 36 → 76 */
  --t-h2: clamp(2rem, 1.25rem + 3vw, 3.5rem);            /* 32 → 56 */
  --t-h3: clamp(1.25rem, 1.1rem + .55vw, 1.5rem);        /* 20 → 24 */
  --t-h4: 1.125rem;                                      /* 18 */
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);      /* 17 → 20 */
  --t-body: 1rem;                                        /* 16 */
  --t-small: .875rem;                                    /* 14 */
  --t-xs: .8125rem;                                      /* 13 — smallest UI text */
  --t-mono: .75rem;                                      /* 12 — mono codes only */

  --lh-tight: 1.02;
  --lh-heading: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --ls-display: -.045em;
  --ls-heading: -.035em;
  --ls-tight: -.02em;

  /* Space — 8px rhythm with 4/12 half-steps */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 80px;
  --s-11: 96px;
  --s-12: 128px;

  --gutter: clamp(16px, 4vw, 48px);
  --container: 1240px;
  --section-y: clamp(88px, 10vw, 144px);
  --header-h: 72px;

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Elevation — three levels */
  --e-1: 0 1px 2px rgba(17, 17, 17, .05), 0 1px 1px rgba(17, 17, 17, .03);
  --e-2: 0 2px 6px -2px rgba(17, 17, 17, .06), 0 18px 36px -20px rgba(17, 17, 17, .24);
  --e-3: 0 12px 24px -12px rgba(17, 17, 17, .14), 0 48px 96px -40px rgba(17, 17, 17, .38);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --d-fast: 160ms;
  --d-base: 320ms;
  --d-slow: 700ms;
  --d-reveal: 900ms;
}

@media (max-width: 720px) {
  :root { --header-h: 64px; }
}