:root {
  color-scheme: light;

  --page: #FBFBF9;
  --card: #FFFFFF;
  --text: #1E2530;
  --muted: #5A6470;
  --border: #E6E4DE;
  --rule: #EFEDE7;

  --quote-bg: #1E2530;
  --quote-text: #E7EAEF;
  --quote-muted: #95A0AE;
  --quote-border: #46525F;

  --hero-bg: #1E2530;
  --hero-text: #E7EAEF;
  --hero-muted: #95A0AE;
  --hero-border: transparent;

  --price-bg: #FFFFFF;
  --price-text: #1E2530;
  --price-muted: #5A6470;
  --price-border: #E6E4DE;
  --price-rule: #EFEDE7;
  --price-underline: #F2D06B;

  --accent: #F2D06B;
  --on-accent: #1E2530;
  --on-accent-muted: #3D4757;

  --chip-done-bg: #F5EFD8;
  --chip-done-text: #4A3D0E;
  --chip-bg: #F1EFE9;
  --chip-text: #5A6470;

  --underline: #F2D06B;
  --focus: #1E2530;

  --column: 960px;
  --gutter: 32px;

  --step-hero: 42px;
  --step-section: 28px;
  --step-card: 19px;
  --step-body: 17px;
  --step-small: 14px;
  --step-micro: 11px;

  --weight-heading: 600;
  --weight-body: 400;
  --weight-label: 500;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --radius-card: 12px;
  --radius-control: 6px;
  --radius-chip: 4px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --page: #0F141A;
  --card: #1E2530;
  --text: #E7EAEF;
  --muted: #95A0AE;
  --border: #2E3743;
  --rule: #2E3743;

  --quote-bg: #EDEAE2;
  --quote-text: #1E2530;
  --quote-muted: #5A6470;
  --quote-border: #DCD8CD;

  --hero-bg: #1E2530;
  --hero-text: #E7EAEF;
  --hero-muted: #95A0AE;
  --hero-border: #2E3743;

  --price-bg: #EDEAE2;
  --price-text: #1E2530;
  --price-muted: #5A6470;
  --price-border: #DCD8CD;
  --price-rule: #DCD8CD;
  --price-underline: #C4A63F;

  --chip-done-bg: #3A3418;
  --chip-done-text: #F2D06B;
  --chip-bg: #262E39;
  --chip-text: #95A0AE;

  --focus: #F2D06B;
}

/* Mobile: the light quote is not used on a small screen — a milk-coloured
   block fills the whole viewport and reads as a flash. */
@media (max-width: 720px) {
  [data-theme="dark"] {
    --quote-bg: #1E2530;
    --quote-text: #E7EAEF;
    --quote-muted: #95A0AE;
    --quote-border: #2E3743;

    --price-bg: #1E2530;
    --price-text: #E7EAEF;
    --price-muted: #95A0AE;
    --price-border: #2E3743;
    --price-rule: #2E3743;
    --price-underline: #F2D06B;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --step-hero: 26px;
    --step-section: 21px;
    --step-card: 17px;
    --step-body: 16px;
  }
}