/* i.Wonder design tokens — red and white only (founder direction, 2026-10-12).
   Brand red is sampled from the founder's portrait reference band (rgb 234,0,0).
   Contrast ratios are measured (WCAG 2.x relative luminance), not estimated. */
:root {
  /* Colour — the whole palette */
  --iw-red: #ea0000;            /* surfaces, headings on white. White on it / it on white: 4.67:1 */
  --iw-red-strong: #c40000;     /* body text on white: 6.27:1 */
  --iw-white: #ffffff;

  /* Lines */
  --iw-line-on-white: rgba(234, 0, 0, 0.22);
  --iw-line-on-red: rgba(255, 255, 255, 0.38);

  /* Type */
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.09rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.40vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.80vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.50vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.75rem + 2.75vw, 4rem);
  --step-5: clamp(2.8rem, 1.90rem + 4.50vw, 5.6rem);
  --step-6: clamp(3.3rem, 1.80rem + 7.50vw, 8.6rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 860px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;

  /* Shape */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  /* Effects (red-tinted, never grey) */
  --shadow-lift: 0 24px 50px -28px rgba(234, 0, 0, 0.28);
}

/* ---------- Surfaces ----------
   Every component reads these variables, so it is correct on either surface:
   white surface → red text and lines; red surface → white text and lines.
   Cards take the opposite surface of the section they sit in. */
:root,
.surface-white {
  --surface: var(--iw-white);
  --fg: var(--iw-red);            /* headings, labels, icons */
  --fg-soft: var(--iw-red-strong);/* running text */
  --line: var(--iw-line-on-white);
  --line-strong: var(--iw-red);
  --focus: var(--iw-red);
}
.surface-red {
  --surface: var(--iw-red);
  --fg: var(--iw-white);
  --fg-soft: var(--iw-white);
  --line: var(--iw-line-on-red);
  --line-strong: var(--iw-white);
  --focus: var(--iw-white);
}