/* tokens.css — DigitalMusic design tokens (dark + paper), faithful to dp-theme.css
   + dp-studiokarton.css, plus a focused, modern instrument layer. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Oswald:wght@500;600;700&family=Merriweather:ital,wght@0,700;0,900;1,400;1,700;1,900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Boomwhacker note colors — the unifying DNA */
  --bw-c:#e8302e; --bw-cs:#f05a28; --bw-d:#f58634; --bw-ds:#d4c426;
  --bw-e:#f5e622; --bw-f:#7cc576; --bw-fs:#4cb87a; --bw-g:#6cbfe2;
  --bw-gs:#4a9dd4; --bw-a:#4c5aa4; --bw-as:#7a49a4; --bw-b:#9e56a2;

  /* Category accents — saiten (warm wood/amber), blaeser (teal/turquoise) */
  --cat-saiten:#c8893a; --cat-blaeser:#1aa5a0;

  --f-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-head: 'Oswald', 'DM Sans', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-display: 'Merriweather', Georgia, serif;

  --tap: 64px;          /* min comfortable touch target */
  --tap-sm: 48px;
  --footer-h: 30px;
  /* status colours (theme-independent — sit on their own coloured fills) */
  --ok: #2eb450;        /* active / success */
  --danger: #c0392b;    /* stop / error */
  --warn: #e0a020;      /* caution */
}

/* ===== DARK (default app theme) ===== */
[data-theme="dark"] {
  --bg: #0a0a1a;
  --bg-2: #10101f;
  --surface: linear-gradient(150deg, #1a1a2e, #23233f);
  --surface-flat: #1a1a2e;
  --surface-2: rgba(255,255,255,0.055);
  --surface-3: rgba(255,255,255,0.10);
  --card: linear-gradient(150deg, #1a1a2e, #2a2a45);
  --text: #ffffff;
  --text-dim: rgba(255,255,255,0.72);
  --text-muted: rgba(255,255,255,0.45);
  --accent: #f39c12;
  --accent-2: #ffb43d;
  --accent-glow: rgba(243,156,18,0.22);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --rail: rgba(10,10,26,0.78);
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 24px;
  --shadow: 0 10px 34px rgba(0,0,0,0.45);
  --shadow-key: 0 6px 0 rgba(0,0,0,0.35), 0 14px 30px rgba(0,0,0,0.4);
  --key-white: #f3f0ea;
  --key-white-shade: #d7d2c6;
  --key-black: #14141f;
  --glow-strength: 1;
  --paper-noise: none;
  --focus: #4da6ff;
  --on-accent: #1a1410;   /* text/icon colour on top of --accent (dark theme) */
}

/* ===== PAPER (Studiokarton) ===== */
[data-theme="paper"] {
  --bg: #f4ead8;
  --bg-2: #ede1ca;
  --surface: #fdf9ec;
  --surface-flat: #fdf9ec;
  --surface-2: rgba(26,22,20,0.045);
  --surface-3: rgba(168,123,58,0.14);
  --card: #fdf9ec;
  --text: #1a1614;
  --text-dim: #6e5d4b;
  --text-muted: #8a7860;
  --accent: #a87b3a;
  --accent-2: #7a5520;
  --accent-glow: rgba(168,123,58,0.18);
  --border: #c8b899;
  --border-strong: #a87b3a;
  --rail: rgba(253,249,236,0.86);
  --radius: 5px;
  --radius-sm: 4px;
  --radius-lg: 7px;
  --shadow: 0 12px 30px rgba(60,40,15,0.14);
  --shadow-key: 0 4px 0 rgba(60,40,15,0.18), 0 10px 22px rgba(60,40,15,0.12);
  --key-white: #fffdf7;
  --key-white-shade: #e6dcc4;
  --key-black: #2a2218;
  --glow-strength: 0;
  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.24 0 0 0 0 0.10 0 0 0 0.05 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  --focus: #7a5520;
  --on-accent: #ffffff;   /* white text on the brown paper accent */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f-ui);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
#root { height: 100vh; height: 100dvh; }

/* paper grain */
[data-theme="paper"] body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--paper-noise) repeat; background-blend-mode: multiply; opacity: 0.9;
}
/* dark glow */
[data-theme="dark"] body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% -10%, rgba(243,156,18,0.07), transparent 55%),
              radial-gradient(ellipse at 85% 110%, rgba(108,191,226,0.06), transparent 50%);
}

button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }

h1,h2,h3,.head { font-family: var(--f-head); font-weight: 700; letter-spacing: 0.01em; }
.mono { font-family: var(--f-mono); }
.eyebrow {
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.26em;
  font-weight: 600; font-size: 11px; color: var(--accent);
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* dwell ring keyframe used by layouts */
@keyframes dwellFill { from { stroke-dashoffset: var(--circ); } to { stroke-dashoffset: 0; } }
@keyframes pulseRing { 0%{transform:scale(1);opacity:.8} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }
@keyframes popIn { from { transform: scale(.9); opacity: 0 } to { transform: scale(1); opacity: 1 } }