/*
 * Design tokens: the single source of truth for the look of the site.
 *
 * When the Figma file arrives, copy its Variables (colours, type, spacing,
 * radii) into this file. Every other stylesheet only references these
 * variables, so changing values here restyles the whole site.
 * See docs/DESIGN_HANDOFF.md.
 */
:root {
  /* Colour */
  --color-bg: #ffffff;
  --color-surface: #fafafa;
  --color-text: #111111;
  --color-text-muted: #6b6b6b;
  --color-border: #ececec;
  --color-accent: #111111;
  --color-accent-contrast: #ffffff;
  --color-highlight: #e8e4dc;     /* abstract shapes, progress track */
  --color-danger: #b42318;
  --color-success: #1f7a4d;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;
  --text-display: clamp(3rem, 9vw, 7rem);

  --leading-tight: 1.1;
  --leading-normal: 1.6;
  --leading-prose: 1.75;

  /* Spacing (4px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Shape & layout */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --border-width: 1px;
  --container: 72rem;
  --measure: 42rem;               /* comfortable reading width */

  /* Cards */
  --card-height: 22rem;           /* fixed height for Tea with AI cards */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 200ms;
}