/* Brand tokens: dark paper, warm ink, orange accent. Edit here, never in a component file. */
:root {
  color-scheme: dark;

  --color-paper: #212121;
  --color-ink: #d2cbc6;
  --color-muted: #bfbfbf;
  --color-quiet: #9a9a9a;
  --color-white: #ffffff;
  --color-accent: #ff5a1f;
  --color-accent-hover: #ff7440;

  /* Derived by opacity over paper. accent: tint 16 %. ink: surface 5 %, line 14 %. */
  --color-accent-tint: #452a21;
  --color-error: #ff9a8a;
  --color-error-tint: #452a28;
  --color-surface: #2a2a29;
  --color-line: #3a3938;

  --font-heading: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --text-display: 60px;
  --text-h2: 40px;
  --text-h3: 23px;
  --text-lede: 22px;
  --text-body-large: 20px;
  --text-body: 18px;
  --text-small: 15px;
  --text-label: 13px;
  --text-mobile-display: 36px;
  --text-mobile-h2: 28px;
  --text-mobile-lede: 18px;
  --text-mobile-body-large: 18px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --space-section: 104px;
  --radius-control: 10px;
  --radius-card: 16px;
  --container: 1180px;
}