*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --parchment: #F7F2E8;
  --parchment-mid: #EEE6D4;
  --parchment-deep: #E0D4BC;
  --ink: #1E1208;
  --ink-mid: #5A3E28;
  --ink-light: #9C7D62;
  --accent: #8B4A1C;
  --accent-light: #B5642A;
  --accent-pale: #F5EAD8;
  --amber: #C07B2A;
  --amber-pale: #FDF3E3;
  --border: rgba(90, 62, 40, 0.14);
  --border-mid: rgba(90, 62, 40, 0.24);
  --shadow-sm: 0 1px 4px rgba(30, 18, 8, 0.08);
  --shadow-md: 0 4px 20px rgba(30, 18, 8, 0.11);
  --shadow-lg: 0 12px 48px rgba(30, 18, 8, 0.15);
  --r: 10px;
  /* Legacy aliases so old refs still resolve */
  --teal: var(--accent);
  --teal-light: var(--accent-light);
  --teal-pale: var(--accent-pale);
}

html, body { height: 100%; overflow: hidden; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--parchment);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

#root { height: 100%; font-size: 17px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--parchment-deep); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-mid); }

* { text-wrap: pretty; }