:root {
  color-scheme: light;
  --color-gallery: #ffffff;
  --color-mist: #f6f9f7;
  --color-leaf: #e9f4ee;
  --color-sage: #8fbf9f;
  --color-moss: #3e8e5e;
  --color-forest: #0b6b47;
  --color-ink: #12352a;
  --color-muted: #5c6f67;
  --color-line: #dce8e1;
  --color-focus: #0b6b47;
  --color-night-bg: #0f1f18;
  --color-night-surface: #14281f;
  --color-night-text: #eaf2ec;
  --color-night-muted: #b8c9c0;
  --color-night-glow: #7fd1a6;
  --color-lamp: #f2c46b;

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --step--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --step-0: clamp(1rem, .95rem + .2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.55rem + 1.8vw, 3rem);
  --step-4: clamp(2.75rem, 1.9rem + 3.2vw, 4.75rem);
  --step-5: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);

  --space-1: .375rem;
  --space-2: .625rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;

  --radius-sm: .55rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 55px rgba(18, 53, 42, .08);
  --shadow-lift: 0 24px 70px rgba(18, 53, 42, .13);

  --container: 1180px;
  --reading: 720px;
  --header-height: 76px;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --duration-fast: 160ms;
  --duration-medium: 320ms;
}

html[data-theme="night"] {
  color-scheme: dark;
  --page-bg: var(--color-night-bg);
  --page-surface: var(--color-night-surface);
  --page-text: var(--color-night-text);
  --page-muted: var(--color-night-muted);
  --page-accent: var(--color-night-glow);
  --page-line: rgba(127, 209, 166, .22);
  --page-tag: rgba(127, 209, 166, .1);
}

html:not([data-theme="night"]) {
  --page-bg: var(--color-gallery);
  --page-surface: var(--color-mist);
  --page-text: var(--color-ink);
  --page-muted: var(--color-muted);
  --page-accent: var(--color-forest);
  --page-line: var(--color-line);
  --page-tag: var(--color-leaf);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-medium: 0ms;
  }
}