/* Chord Match brand system — the playable identity layer.
   Keep components on tokens; feature styles may add layout, never new brand colors. */
:root {
  /* Brand tokens */
  --brand-ink: #101d2b;
  --brand-ink-2: #172c3d;
  --brand-ink-3: #214458;
  --brand-mint: #79e2b4;
  --brand-mint-strong: #43d796;
  --brand-mint-soft: #baf3d4;
  --brand-cream: #fff7e8;
  --brand-cream-2: #f4e8d0;
  --brand-sun: #ffc857;
  --brand-coral: #ff7b6e;
  --brand-lilac: #c6b6ff;
  --brand-line: rgba(255,247,232,.16);
  --brand-line-strong: rgba(255,247,232,.28);
  --brand-shadow: rgba(4,12,20,.32);
  --brand-display: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  --brand-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --brand-mono: "IBM Plex Mono", ui-monospace, monospace;
  --brand-radius-sm: 10px;
  --brand-radius-md: 16px;
  --brand-radius-lg: 24px;
  --brand-radius-pill: 999px;
  --brand-ease: cubic-bezier(.2,.8,.2,1);
  /* Compatibility aliases for existing component CSS */
  --bg: var(--brand-ink);
  --bg-2: var(--brand-ink-2);
  --panel: var(--brand-ink-2);
  --panel-2: var(--brand-ink-3);
  --line: var(--brand-line);
  --gold: var(--brand-sun);
  --gold-2: var(--brand-cream-2);
  --text: var(--brand-cream);
  --muted: #a9bdc9;
  --paper: var(--brand-cream);
  --ink: var(--brand-ink);
  --match: var(--brand-mint);
  --bad: var(--brand-coral);
  --serif: var(--brand-display);
  --sans: var(--brand-body);
  --radius: var(--brand-radius-md);
}

html { background: var(--brand-ink); }
body {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(121,226,180,.20), transparent 62%),
    radial-gradient(720px 500px at 96% 18%, rgba(198,182,255,.12), transparent 64%),
    var(--brand-ink);
  color: var(--brand-cream);
  font-family: var(--brand-body);
  font-size: 15px;
  letter-spacing: -.01em;
}

/* Typography: round, loud headlines; calm utility copy; rhythm gets a mono voice. */
h1, h2, h3, h4, .prompt .chord, .front.name .chord, .chart-card .chord,
.quest-title-row h2, .daily-welcome h2, .daily-lesson-card h3, .rewards-card h3,
.quest-reward-dialog h2, .streak-dialog h2 { font-family: var(--brand-display) !important; font-weight: 600 !important; letter-spacing: -.035em !important; }

h1 { color: var(--brand-cream); font-size: clamp(34px, 7vw, 52px); }
h1 small { font-family: var(--brand-mono); color: var(--brand-mint); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
p, label, select, input, button { font-family: var(--brand-body); }
.fgroup .k, .fcount, .stat .k, .prompt .label, .daily-eyebrow, .quest-side-kicker,
.rewards-eyebrow, .rewards-next-label, .name-root-caption, .name-segment-label,
.workspace-bar .eyebrow { font-family: var(--brand-mono); font-weight: 600; letter-spacing: .09em; }
.stat .v, .header-streak strong, .combo, .xp, .quest-level-progress { font-variant-numeric: tabular-nums; }

/* Controls: chunky enough for a thumb, crisp enough for a keyboard. */
.btn, .pill, .chip, .mode, .name-segment-label, .rewards-tabs button, .rewards-play,
.daily-lesson-card button, .quest-moods button, .quest-chord, .playbtn {
  border-radius: var(--brand-radius-pill);
  transition: transform .18s var(--brand-ease), background-color .18s var(--brand-ease), border-color .18s var(--brand-ease), color .18s var(--brand-ease), box-shadow .18s var(--brand-ease);
}
.btn { min-height: 44px; padding: 10px 17px; border: 1px solid var(--brand-line-strong); background: rgba(255,247,232,.07); color: var(--brand-cream); font-weight: 600; }
.btn:hover, .pill:hover { transform: translateY(-2px); border-color: var(--brand-mint); background: rgba(121,226,180,.12); }
.btn.primary { border-color: var(--brand-mint-strong); background: var(--brand-mint-strong); color: var(--brand-ink); box-shadow: 0 8px 0 rgba(20,91,66,.8), 0 16px 28px rgba(67,215,150,.16); }
.btn.primary:hover { background: var(--brand-mint); box-shadow: 0 6px 0 rgba(20,91,66,.8), 0 14px 24px rgba(67,215,150,.22); }
.btn.primary:active, .pill:active, button:active { transform: translateY(1px); }
.btn[aria-pressed="true"], .pill[aria-pressed="true"], .pill[aria-checked="true"] { border-color: var(--brand-sun); background: rgba(255,200,87,.16); color: var(--brand-sun); }

/* Surfaces: ink first, cream as the event state. */
.stat, .chart-card, .daily-lesson-card, .rewards-card, .quest-sidequest, .workspace-bar,
.step, .name-root-choice, .settings-preference { border-color: var(--brand-line); background: rgba(23,44,61,.88); box-shadow: 0 14px 30px var(--brand-shadow); }
.card .face { border-radius: var(--brand-radius-md); }
.card .back { background: linear-gradient(145deg, #294b5d, #172c3d); border-color: rgba(121,226,180,.32); box-shadow: 0 12px 22px var(--brand-shadow); }
.front.name { background: linear-gradient(145deg, #2b5260, #172c3d); border-color: rgba(121,226,180,.56); }
.front.name .chord { color: var(--brand-cream); }
.front.notation { background: var(--brand-cream); border-color: var(--brand-cream-2); }
.card.matched .front { box-shadow: 0 0 0 3px var(--brand-mint), 0 0 26px rgba(121,226,180,.38); }

/* Game vocabulary: mint = correct/active, sun = choice, coral = retry. */
.card.matched, [data-result="correct"], .is-correct { --state-color: var(--brand-mint); }
[data-result="wrong"], .is-wrong { --state-color: var(--brand-coral); }
.feedback.correct, .success, .rewards-solved { color: var(--brand-mint) !important; }
.feedback.incorrect, .error { color: var(--brand-coral) !important; }

/* Journey: a little theatrical, never noisy. */
.quest-title-row h2, .daily-welcome h2 { color: var(--brand-cream); }
.quest-title-row h2 > span, .daily-lesson-label, .quest-world-heading, .rewards-earned { color: var(--brand-mint); }
.quest-treasure { border-color: rgba(255,200,87,.35); background: linear-gradient(130deg, rgba(255,200,87,.16), rgba(255,200,87,.03)); }
.quest-treasure-copy strong, .quest-compass, .quest-side-kicker { color: var(--brand-sun); }
.quest-node.is-current, .quest-stop.is-current .quest-node { box-shadow: none; } /* the lit stage carries its own glow */

/* Focus always looks intentional. */
:where(button, a, select, input, summary):focus-visible { outline: 3px solid var(--brand-sun); outline-offset: 4px; }

@media (max-width: 560px) {
  body { font-size: 14px; }
  .wrap { padding-inline: 14px; }
  h1 { font-size: clamp(32px, 11vw, 46px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}