/* Design tokens: colour, type, spacing. Every other stylesheet reads from these. */
:root {
  color-scheme: dark;

  /* Colour: the logo panel is pure black so the logo's own ground disappears;
     the reading column sits one step lighter, in the drop's navy. */
  --ink: #000000;
  --surface: #050f19;
  --field: #0b1b2a;
  --field-hover: #0f2335;
  --line: #1d3448;
  --fg: #e8eef2;
  --muted: #8a9cab;
  --teal: #2bb3ad;
  --teal-hover: #4fcac4;
  --teal-active: #1f948f;
  --gold: #c9a35a;
  --error: #ff8f80;

  /* Type */
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --arabic: "Amiri", "Traditional Arabic", "Times New Roman", serif;

  /* Type scale (fluid where it matters) */
  --text-micro: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-arabic: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --text-display: clamp(2.75rem, 1.6rem + 6vw, 4.5rem);

  --tracking-tight: -0.02em;
  --tracking-wide: 0.18em;
  --leading-none: 0.95;
  --leading-relaxed: 1.7;

  /* Spacing scale (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  --gutter: max(24px, env(safe-area-inset-left, 0px));
  --gutter-end: max(24px, env(safe-area-inset-right, 0px));

  --ease: 200ms ease-out;
}

@media (min-width: 960px) {
  :root {
    --text-display: clamp(3.5rem, 0.5rem + 5.2vw, 5.75rem);
  }
}