:root {
  --color-bg: #151411;
  --color-surface: #1d1b17;
  --color-surface-soft: #24211c;
  --color-text: #f2eadc;
  --color-muted: #aaa196;
  --color-faint: #746d64;
  --color-accent: #6f9189;
  --color-accent-warm: #a06f55;
  --color-line: rgba(242, 234, 220, .13);
  --color-line-strong: rgba(242, 234, 220, .3);
  --color-overlay: rgba(13, 12, 10, .97);
  --color-header: rgba(21, 20, 17, .9);
  --color-mat: #e7dfd1;
  --color-frame: rgba(255, 250, 241, .78);
  --shadow-frame: 0 18px 50px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .24);
  --font-display: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-ui: "Inter", Helvetica, Arial, sans-serif;
  --content-wide: 1480px;
  --content-narrow: 900px;
  --gutter: clamp(20px, 4vw, 64px);
  --space-1: .5rem;
  --space-2: .875rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5rem;
  --space-7: clamp(7rem, 12vw, 12rem);
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 650ms;
  --duration-cinematic: 900ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

:root[data-theme="light"] {
  --color-bg: #f2eee5;
  --color-surface: #e9e3d8;
  --color-surface-soft: #ddd5c8;
  --color-text: #25221d;
  --color-muted: #6f685e;
  --color-faint: #8b8276;
  --color-accent: #496f68;
  --color-accent-warm: #8d5f49;
  --color-line: rgba(37, 34, 29, .14);
  --color-line-strong: rgba(37, 34, 29, .32);
  --color-overlay: rgba(235, 229, 218, .98);
  --color-header: rgba(242, 238, 229, .92);
  --color-mat: #faf7f0;
  --color-frame: rgba(37, 34, 29, .72);
  --shadow-frame: 0 17px 44px rgba(63, 53, 41, .16), 0 2px 7px rgba(63, 53, 41, .12);
}