:root {
  color-scheme: light;
  --bg-main: #f3efe8;
  --bg-soft: #e9e1d6;
  --bg-elevated: rgba(255, 252, 248, 0.7);
  --surface: #e1d7ca;
  --surface-2: #d5c7b6;
  --line-soft: rgba(132, 116, 100, 0.24);
  --line-strong: rgba(95, 81, 67, 0.38);
  --text-main: #171411;
  --text-soft: #5c5348;
  --text-muted: #726659;
  --accent-dark: #171411;
  --accent-soft: #bca690;
  --accent-warm: #9f7759;
  --accent-gold: #b28b68;
  --success: #325c46;
  --danger: #a34538;
  --shadow-soft: 0 18px 60px rgba(23, 20, 17, 0.08);
  --shadow-medium: 0 16px 32px rgba(23, 20, 17, 0.12);
  --shadow-strong: 0 24px 80px rgba(23, 20, 17, 0.16);
  --glow-soft: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  --page-bg: var(--bg-main);
  --section-bg: var(--bg-soft);
  --card-bg: var(--surface);
  --card-bg-elevated: var(--bg-elevated);
  --border-subtle: var(--line-soft);
  --border-strong: var(--line-strong);
  --heading-color: var(--text-main);
  --body-color: var(--text-soft);
  --meta-color: var(--text-muted);
  --button-bg: var(--accent-dark);
  --button-text: var(--bg-main);
  --space-3xs: 0.25rem;
  --space-2xs: 0.375rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --gutter: 2rem;
  --radius-xs: 0.5rem;
  --radius-sm: 0.875rem;
  --radius-md: 1.5rem;
  --radius-lg: 2.25rem;
  --radius-xl: 3rem;
  --radius-pill: 999px;
  --content-max: 82rem;
  --content-wide: 100rem;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Baskerville, Georgia, serif;
  --font-sans: "Aptos", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", "Trebuchet MS", sans-serif;
  --type-display-1: clamp(2.5rem, 3.8vw, 4.2rem);
  --type-display-2: clamp(1.55rem, 6.5vw, 2.8rem);
  --type-heading-1: clamp(1.4rem, 2vw, 2.2rem);
  --type-heading-2: clamp(1.1rem, 1.4vw, 1.4rem);
  --type-body-lg: clamp(1.12rem, 1.4vw, 1.28rem);
  --type-body-sm: clamp(0.95rem, 1.1vw, 1.06rem);
  --type-label-xs: 0.68rem;
  --type-label-sm: 0.72rem;
  --type-label: 0.82rem;
  --card-padding-sm: clamp(1rem, 2vw, 1.5rem);
  --card-padding: clamp(1.2rem, 2vw, 2rem);
  --card-padding-lg: clamp(2rem, 3.5vw, 3rem);
  --radius-organic-sm: 1.8rem 1.3rem 2.2rem 1.4rem;
  --radius-organic: 2rem 1.5rem 2.4rem 1.7rem;
  --radius-organic-lg: 2.4rem 1.6rem 3rem 1.8rem;
  --transition-fast: 160ms ease;
  --transition-medium: 260ms ease;
  --transition-slow: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-height: 5.5rem;
  --z-progress: 50;
  --z-header: 40;
  --z-drawer: 60;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-main: #131110;
  --bg-soft: #1c1815;
  --bg-elevated: rgba(40, 34, 28, 0.88);
  --surface: #262019;
  --surface-2: #302922;
  --line-soft: rgba(209, 195, 180, 0.18);
  --line-strong: rgba(217, 204, 189, 0.30);
  --text-main: #f5efe7;
  --text-soft: #ddd1c4;
  --text-muted: #c8baa8;
  --accent-dark: #f5efe6;
  --accent-soft: #887665;
  --accent-warm: #c6a486;
  --accent-gold: #d0b08f;
  --success: #9cc8ae;
  --danger: #f1a090;
  --shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.25);
  --shadow-medium: 0 16px 32px rgba(0, 0, 0, 0.30);
  --shadow-strong: 0 24px 80px rgba(0, 0, 0, 0.36);
  --glow-soft: 0 0 0 1px rgba(255, 244, 232, 0.06) inset;
  --page-bg: var(--bg-main);
  --section-bg: var(--bg-soft);
  --card-bg: var(--surface);
  --card-bg-elevated: var(--bg-elevated);
  --border-subtle: var(--line-soft);
  --border-strong: var(--line-strong);
  --heading-color: var(--text-main);
  --body-color: var(--text-soft);
  --meta-color: var(--text-muted);
  --button-bg: var(--accent-dark);
  --button-text: var(--bg-main);
}

@media (max-width: 64rem) {
  :root {
    --nav-height: 5rem;
    --space-4xl: 5rem;
    --space-5xl: 6.5rem;
  }
}

@media (min-width: 120rem) {
  :root {
    --content-max: 90rem;
    --content-wide: 112rem;
    --nav-height: 5.9rem;
  }
}

@media (min-width: 160rem) {
  :root {
    --content-max: 98rem;
    --content-wide: 122rem;
  }
}

@media (min-width: 215rem) {
  :root {
    --content-max: 108rem;
    --content-wide: 136rem;
    --type-display-1: 5rem;
    --type-display-2: 3.2rem;
    --type-heading-1: 2.4rem;
    --type-body-lg: 1.36rem;
    --space-4xl: 7rem;
    --space-5xl: 10rem;
  }
}

@media (max-width: 48rem) {
  :root {
    --space-3xl: 3.5rem;
    --space-4xl: 4rem;
    --space-5xl: 5rem;
    --radius-lg: 1.75rem;
    --radius-xl: 2.25rem;
  }
}