:root {
  --bg: #f8f7f4;
  --panel: #ffffff;
  --ink: #252620;
  --ink-raised: #31322b;
  --hover: rgba(34, 35, 31, 0.05);
  --active: rgba(34, 35, 31, 0.08);
  --line: #e3e2da;
  --line-strong: #c9cac1;
  --fg: #22231f;
  --fg-muted: #676962;
  --fg-faint: #a3a49b;
  --lilac: #d2c4f2;
  --lilac-soft: #ebe7f2;
  --lilac-line: #d3c8e4;
  --purple: #74608e;
  --good: #5f8049;
  --good-soft: #e8efdf;
  --warn: #b48f3c;
  --warn-soft: #f2eedc;
  --bad: #b0563f;
  --bad-soft: #f5e6e0;
  --info: #4b6389;
  --info-soft: #e3e8f0;
  --hero-bg: #e7e2ec;
  --input-bg: #fbfbf9;
  --track: rgba(34, 35, 31, 0.08);
  --shadow-card: 0 1px 2px rgba(38, 32, 38, 0.03), 0 14px 34px -24px rgba(38, 32, 38, 0.18);
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --focus: #8067af;
  --reveal-distance: 18px;
  --reveal-scale-distance: 28px;
  --reveal-scale: 0.985;
  --reveal-duration: 0.7s;
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211;
  --panel: #1b1b1a;
  --ink: #1b1b1a;
  --ink-raised: #262625;
  --hover: rgba(255, 255, 255, 0.05);
  --active: rgba(255, 255, 255, 0.09);
  --line: #2b2b29;
  --line-strong: #3a3a37;
  --fg: #f1f0ea;
  --fg-muted: #a3a29a;
  --fg-faint: #6d6c65;
  --lilac-soft: rgba(210, 196, 242, 0.12);
  --lilac-line: rgba(210, 196, 242, 0.28);
  --purple: #c2b1e6;
  --good: #8fb37a;
  --good-soft: rgba(143, 179, 122, 0.14);
  --warn: #d1ab58;
  --warn-soft: rgba(209, 171, 88, 0.14);
  --bad: #d9826c;
  --bad-soft: rgba(217, 130, 108, 0.14);
  --info: #9db4d8;
  --info-soft: rgba(157, 180, 216, 0.14);
  --hero-bg: #221f2a;
  --input-bg: #141413;
  --track: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 14px 34px -24px rgba(0, 0, 0, 0.6);
}

html { background: var(--bg); }

.reveal-ready [data-reveal] { opacity: 0; }
.reveal-ready [data-reveal].in { opacity: 1; animation: reveal-up var(--reveal-duration) var(--ease) backwards; }
.reveal-ready [data-reveal="fade"].in { animation-name: reveal-fade; }
.reveal-ready [data-reveal="scale"].in { animation-name: reveal-scale; }

@keyframes reveal-up { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: none; } }
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-scale { from { opacity: 0; transform: translateY(var(--reveal-scale-distance)) scale(var(--reveal-scale)); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.45; } }
@keyframes icon-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }