:root {
  --bg: #f7f5f0;
  --bg2: #efece4;
  --bg3: #e6e1d6;
  --surface: #ffffff;
  --surface2: #f5f2eb;
  --border: #ddd8cc;
  --border2: #c8bfae;
  --gold: #8a6500;
  --gold-lt: #faf4e4;
  --gold-b: #d4b060;
  --teal: #0b6b5e;
  --teal-lt: #e8f5f2;
  --teal-b: #7ec8bc;
  --green: #1a6632;
  --green-lt: #edf7f0;
  --green-lo: #e8f5e8;
  --green-hi: #2d8a4e;
  --green-b: #7cc89c;
  --ink: #1c1916;
  --ink2: #3a352d;
  --ink3: #6b6153;
  --ink4: #9e9283;
  --ink5: #c8bfb0;
  --red: #9a201a;
  --red-lo: #fef2f2;
  --blue: #1a4f7a;
  --blue-lt: #eaf2fa;
  --blue-b: #8ab8d8;
  --orange: #7a3500;
  --orange-lt: #faf0e8;
  --orange-b: #d4a070;
  --amber: #b8860b;
  --cyan: #0b6b5e;
  --cyan-lo: #e8f5f2;
  --white: #ffffff;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', 'Courier New', monospace;
  --border-hi: #c8bfae;
  --shadow-premium: 0 20px 50px rgba(0,0,0,0.15);
  --radius: 12px;
  --inner-radius: 8px;
  --sh1: 0 1px 3px rgba(28,25,22,.07),0 1px 2px rgba(28,25,22,.04);
  --sh2: 0 4px 14px rgba(28,25,22,.09),0 2px 4px rgba(28,25,22,.05);
  --sh3: 0 14px 44px rgba(28,25,22,.13),0 4px 12px rgba(28,25,22,.07);
}

html.dark {
  --bg: #141210;
  --bg2: #1c1a17;
  --bg3: #2a2723;
  --surface: #1e1c19;
  --surface2: #252320;
  --border: #2e2a26;
  --border2: #3d3833;
  --gold: #d4b060;
  --gold-lt: #2a2416;
  --gold-b: #8a6500;
  --teal: #7ec8bc;
  --teal-lt: #0f2d29;
  --teal-b: #0b6b5e;
  --green: #7cc89c;
  --green-lt: #0f2d1a;
  --green-lo: #0f2d1a;
  --green-hi: #4ade80;
  --green-b: #2d8a4e;
  --ink: #f0ede6;
  --ink2: #c8bfb0;
  --ink3: #9e9283;
  --ink4: #6b6153;
  --ink5: #3a352d;
  --red: #f87171;
  --red-lo: #2a0f0f;
  --blue: #8ab8d8;
  --blue-lt: #0f1a2f;
  --blue-b: #1a4f7a;
  --orange: #d4a070;
  --orange-lt: #2a1a0f;
  --orange-b: #7a3500;
  --amber: #fbbf24;
  --cyan: #7ec8bc;
  --cyan-lo: #0f2d29;
  --white: #1e1c19;
  --border-hi: #3d3833;
  --sh1: 0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --sh2: 0 4px 14px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.2);
  --sh3: 0 14px 44px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.25);
  --shadow-premium: 0 20px 50px rgba(0,0,0,0.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}