:root {
  color-scheme: light;

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --bg: #f1eee9;
  --bg-hero: radial-gradient(110% 90% at 50% 0%, #e7e4dd 0%, #ece9e3 55%, #f1eee9 100%);
  --bg-hero-flat: radial-gradient(140% 60% at 50% 0%, #e7e4dd 0%, #f1eee9 100%);
  --surface: #ffffff;
  --surface-alt: #e9e6df;
  --surface-ink: #1c1b19;
  --surface-ink-deep: #0e0d0c;

  --ink: #1c1b19;
  --ink-body: #3c3a36;
  --ink-soft: #55524c;
  --muted: #6e6a63;
  --faint: #8d8880;
  --italic: #a5a19a;
  --dim: #b0aca4;
  --dim-2: #b9b5ad;
  --dimmer: #c2beb6;

  --inverse: #f1eee9;

  --inverse-soft: #e6e2da;
  --code-kw: #a5a19a;
  --code-cm: #8d8880;

  --line-faint: rgba(28, 27, 25, 0.08);
  --line: rgba(28, 27, 25, 0.12);
  --line-mid: rgba(28, 27, 25, 0.18);
  --line-control: rgba(28, 27, 25, 0.22);
  --line-strong: rgba(28, 27, 25, 0.28);
  --line-on-ink: rgba(241, 238, 233, 0.12);

  --fs-hero-name: clamp(46px, 5.83vw, 84px);
  --fs-hero-role: clamp(36px, 5vw, 72px);
  --fs-error-numeral: clamp(110px, 12.5vw, 180px);
  --fs-page-title: clamp(42px, 4.44vw, 64px);
  --fs-article-title: clamp(30px, 3.75vw, 54px);
  --fs-drop-cap: clamp(40px, 3.61vw, 52px);
  --fs-h2: clamp(30px, 2.78vw, 40px);
  --fs-contact-title: clamp(38px, 3.61vw, 52px);
  --fs-stat: clamp(26px, 2.5vw, 36px);
  --fs-feature-title: clamp(24px, 2.36vw, 34px);
  --fs-featured-title: clamp(23px, 2.22vw, 32px);
  --fs-h3: clamp(23px, 2.08vw, 30px);
  --fs-stat-sm: clamp(24px, 1.94vw, 28px);
  --fs-row-title: clamp(19px, 1.67vw, 24px);
  --fs-quote: clamp(19px, 1.6vw, 23px);
  --fs-card-title: clamp(18px, 1.46vw, 21px);
  --fs-brand: clamp(16px, 1.18vw, 17px);
  --fs-article-body: clamp(14.5px, 1.11vw, 16px);
  --fs-body: clamp(12.5px, 0.94vw, 13.5px);
  --fs-body-sm: clamp(12.5px, 0.9vw, 13px);
  --fs-meta: clamp(10.5px, 0.8vw, 11.5px);
  --fs-label: clamp(9.5px, 0.73vw, 10.5px);
  --fs-label-sm: clamp(9px, 0.69vw, 10px);
  --fs-label-xs: clamp(8px, 0.66vw, 9.5px);
  --fs-mono-num: clamp(10px, 0.76vw, 11px);
  --fs-mono-row: clamp(11px, 0.9vw, 13px);
  --fs-code: 13px;
  --fs-code-inline: 12.5px;

  --ls-lang: 0.12em;
  --ls-tag: 0.14em;
  --ls-nav: 0.16em;
  --ls-block: 0.18em;
  --ls-sidebar: 0.2em;
  --ls-eyebrow: 0.22em;
  --ls-display: -0.01em;

  --pad: clamp(20px, 5vw, 56px);

  --section-gap: clamp(72px, 9.72vw, 140px);

  --section-body-min: min(40vw, 520px);
  --container: 1120px;
  --container-wide: 1180px;
  --container-read: 900px;
  --measure: 660px;
  --header-h: 66px;
  --space: 4px;

  --radius: 12px;
  --radius-pill: 999px;
  --radius-control: 8px;
  --radius-install: 10px;
  --radius-focus: 2px;

  --t-fast: 0.2s ease;
  --t-base: 0.25s ease;
  --t-theme: 0.35s ease;
  --t-menu: 0.28s ease;

  --t-reveal: 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  --lift: translateY(-3px);

  --shadow-hover: 0 6px 16px rgba(28, 27, 25, 0.05);
  --shadow-popover: 0 10px 26px rgba(28, 27, 25, 0.1);

  --z-header: 50;
  --z-menu: 40;
  --z-popover: 30;
}

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

  --bg: #161513;
  --bg-hero: radial-gradient(110% 90% at 50% 0%, #201e1b 0%, #1b1a17 55%, #161513 100%);
  --bg-hero-flat: radial-gradient(140% 60% at 50% 0%, #201e1b 0%, #161513 100%);
  --surface: #1f1e1b;
  --surface-alt: #1f1e1b;
  --surface-ink: #0e0d0c;
  --surface-ink-deep: #0e0d0c;

  --ink: #ece9e3;
  --ink-body: #d6d2ca;
  --ink-soft: #c6c2ba;
  --muted: #aaa69e;

  --faint: #aaa69e;
  --dim: rgba(236, 233, 227, 0.34);
  --dim-2: rgba(236, 233, 227, 0.28);
  --dimmer: rgba(236, 233, 227, 0.24);

  --inverse: #161513;

  --line-faint: rgba(236, 233, 227, 0.1);
  --line: rgba(236, 233, 227, 0.16);
  --line-mid: rgba(236, 233, 227, 0.22);
  --line-control: rgba(236, 233, 227, 0.28);
  --line-strong: rgba(236, 233, 227, 0.34);

  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-popover: 0 10px 26px rgba(0, 0, 0, 0.5);
}

@media (max-width: 900px) {
  :root { --header-h: 58px; }
}