:root {
  color-scheme: light;
  --ink: #241d1d;
  --muted: #695f60;
  --paper: #ffffff;
  --canvas: #f7f4f1;
  --surface: #fffaf5;
  --line: #e7ded7;
  --brand: #8f0715;
  --brand-deep: #63050e;
  --brand-soft: #fff0f1;
  --action: #087f54;
  --action-dark: #05603f;
  --accent: #f15d48;
  --gold: #d59b28;
  --focus: #145eff;
  --shadow-sm: 0 6px 18px rgba(52, 24, 25, 0.08);
  --shadow-md: 0 16px 44px rgba(52, 24, 25, 0.14);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --container: min(1480px, calc(100% - 48px));
  --reading: 780px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --font-display: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --step--1: clamp(0.76rem, 0.73rem + 0.15vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.91rem + 0.18vw, 1.06rem);
  --step-1: clamp(1.1rem, 1.01rem + 0.44vw, 1.36rem);
  --step-2: clamp(1.32rem, 1.18rem + 0.72vw, 1.78rem);
  --step-3: clamp(1.65rem, 1.4rem + 1.25vw, 2.45rem);
  --step-4: clamp(2.05rem, 1.64rem + 2.05vw, 3.45rem);
}

@media (max-width: 680px) {
  :root {
    --container: min(100% - 24px, 1360px);
    --radius-md: 14px;
    --radius-lg: 18px;
    --space-7: 36px;
    --space-8: 52px;
  }
}