:root {
  color-scheme: dark;
  --bg: #171715;
  --bg-deep: #10100f;
  --surface: #22221f;
  --surface-2: #2b2b27;
  --surface-3: #34332e;
  --text: #eee9dd;
  --muted: #b2ad9f;
  --faint: #7f7b72;
  --line: rgba(238, 233, 221, 0.15);
  --line-strong: rgba(238, 233, 221, 0.28);
  --cream: #d2c8b4;
  --charcoal: #272724;
  --copper: #7e482a;
  --plum: #4d3743;
  --forest: #2f462b;
  --navy: #223343;
  --teal: #234f50;
  --oxblood: #68302b;
  --amber: #f4a321;
  --amber-deep: #a45e05;
  --button-text: #1b1711;
  --shadow: rgba(4, 4, 3, 0.48);
  --radius-card: 24px;
  --radius-control: 10px;
  --radius-pill: 999px;
  --header-height: 72px;
  --shell: min(1400px, calc(100vw - 64px));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #e9e3d7;
  --bg-deep: #d9d0bf;
  --surface: #f5f0e6;
  --surface-2: #ded6c7;
  --surface-3: #cfc6b6;
  --text: #26241f;
  --muted: #5f5a50;
  --faint: #777064;
  --line: rgba(38, 36, 31, 0.16);
  --line-strong: rgba(38, 36, 31, 0.3);
  --button-text: #1b1711;
  --shadow: rgba(72, 52, 33, 0.2);
}

@media (max-width: 760px) {
  :root {
    --shell: calc(100vw - 32px);
    --radius-card: 18px;
  }
}