/* TeachCue iOS — Warm editorial theme (matches website) */
:root {
  /* Warm palette — NO dark blues */
  --bone: #FAF6F0;
  --bone-2: #F3EDE3;
  --cream: #FFFBF5;
  --ink: #1E1A15;
  --ink-2: #3A332B;
  --ink-3: #756B5E;
  --rule: #E8DFD1;
  --rule-2: #D9CDB8;

  --accent: #E87B4E;          /* coral primary */
  --accent-deep: #C45E33;
  --accent-soft: #FBEADD;
  --accent-glow: rgba(232,123,78,0.28);
  --sage: #7BA896;
  --sage-soft: #E4EEE9;
  --butter: #F0D78A;
  --plum: #6B4F6B;
  --rec: #D9513F;

  /* Legacy aliases (old code expects these) — map to warm palette */
  --bg: var(--bone);
  --bg-2: var(--bone-2);
  --surface: var(--cream);
  --surface-2: #F7F1E7;
  --card: var(--cream);
  --border: var(--rule);
  --border-strong: var(--rule-2);
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --text-muted: var(--ink-3);
  --amber: var(--butter);
  --pad: 16px;

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: #EDE4D4;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.scroll::-webkit-scrollbar { display: none; }
.scroll { scrollbar-width: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, textarea { font-family: inherit; color: inherit; background: none; border: none; outline: none; }

[data-density="compact"] { --pad: 12px; }
[data-density="cozy"]    { --pad: 16px; }
[data-density="roomy"]   { --pad: 20px; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--bone-2) 0%, var(--cream) 50%, var(--bone-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

@keyframes pulse-rec {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.88); }
}

@keyframes waveform {
  0%   { transform: scaleY(0.3); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0.3); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }

button, .noselect { user-select: none; -webkit-user-select: none; }

input[type="range"].accent {
  -webkit-appearance: none;
  height: 4px;
  background: var(--rule);
  border-radius: 4px;
  outline: none;
}
input[type="range"].accent::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-glow);
  cursor: pointer;
}