/* ==========================================================================
   Songbook — design tokens
   Every theme redefines the same semantic set, so component CSS never needs
   to know which theme is active.
   ========================================================================== */

:root {
  /* Type ---------------------------------------------------------------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-md: 0.875rem;    /* 14 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-lg: 1.0625rem;   /* 17 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.25rem;    /* 36 */

  --tracking-wide: 0.08em;
  --tracking-caps: 0.11em;

  /* Space --------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* Shape --------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 340ms;

  /* Layout -------------------------------------------------------------- */
  --topbar-h: 60px;
  --sidebar-w: 268px;
  --detail-w: minmax(380px, 0.9fr);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ------------------------------------------------------------------- */
  /* Midnight (default)                                                   */
  /* ------------------------------------------------------------------- */
  color-scheme: dark;

  --bg: #050506;
  --bg-gradient: radial-gradient(120% 80% at 50% -20%, #101116 0%, #050506 62%);
  --surface-0: #0a0a0d;
  --surface-1: #101014;
  --surface-2: #17171c;
  --surface-3: #1f1f26;
  --surface-hover: #1a1a20;
  --surface-active: #23232b;

  --border: #202027;
  --border-soft: #17171d;
  --border-strong: #2e2e38;
  --border-accent: #3a3a46;

  --text: #f2f2f5;
  --text-2: #a5a5b2;
  --text-3: #6d6d7b;
  --text-4: #46464f;
  --text-on-accent: #06060a;

  --accent: #7aa2ff;
  --accent-hover: #9bbaff;
  --accent-soft: rgba(122, 162, 255, 0.14);
  --accent-line: rgba(122, 162, 255, 0.45);

  --success: #4ade80;
  --danger: #ff6b63;
  --danger-soft: rgba(255, 107, 99, 0.13);
  --warning: #f5c451;

  --chord-text: #ecedf2;
  --chord-token: #ffffff;
  --chord-accent: #7fbcff;
  --section-accent: #7fbcff;
  --lyrics-text: #d3d4dc;

  --song-title-default: var(--text);
  --song-title-ice: #9ec9ff;
  --song-title-amber: #ffce85;
  --song-title-mint: #86e0bd;
  --song-title-rose: #ffa3bd;

  --stage-bg: #000000;
  --stage-text: #ffffff;
  --stage-chrome: rgba(16, 16, 20, 0.86);
  --stage-chrome-border: rgba(255, 255, 255, 0.1);

  --overlay: rgba(4, 4, 6, 0.72);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, 0.85);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-line);
}

/* --------------------------------------------------------------------- */
:root[data-theme="stage"] {
  color-scheme: dark;
  --bg: #0b0709;
  --bg-gradient: radial-gradient(115% 75% at 78% -14%, rgba(255, 59, 48, 0.2) 0%, transparent 58%), linear-gradient(180deg, #0d080a 0%, #060405 100%);
  --surface-0: #120c0f;
  --surface-1: #181014;
  --surface-2: #21151a;
  --surface-3: #2b1c21;
  --surface-hover: #1f1418;
  --surface-active: #2e1e23;
  --border: #2c1b21;
  --border-soft: #201217;
  --border-strong: #40272f;
  --border-accent: #56333c;
  --text: #fff3f0;
  --text-2: #c6a09a;
  --text-3: #8d6a68;
  --text-4: #5c4245;
  --text-on-accent: #1b0407;
  --accent: #ff6b63;
  --accent-hover: #ff8d86;
  --accent-soft: rgba(255, 107, 99, 0.15);
  --accent-line: rgba(255, 107, 99, 0.5);
  --chord-text: #fff6f3;
  --chord-token: #ffffff;
  --chord-accent: #ffa39b;
  --section-accent: #ffa39b;
  --lyrics-text: #f0d3cd;
  --song-title-ice: #9cdcff;
  --song-title-amber: #ffc06a;
  --stage-chrome: rgba(22, 12, 16, 0.88);
}

:root[data-theme="studio"] {
  color-scheme: dark;
  --bg: #070c0a;
  --bg-gradient: radial-gradient(110% 70% at 20% -12%, rgba(48, 209, 88, 0.14) 0%, transparent 56%), linear-gradient(180deg, #080e0b 0%, #050807 100%);
  --surface-0: #0b1210;
  --surface-1: #101815;
  --surface-2: #16211d;
  --surface-3: #1e2c26;
  --surface-hover: #142019;
  --surface-active: #20302a;
  --border: #1d2a25;
  --border-soft: #141e1a;
  --border-strong: #2b3d35;
  --border-accent: #3a5248;
  --text: #edfaf2;
  --text-2: #96b3a5;
  --text-3: #64806f;
  --text-4: #405349;
  --text-on-accent: #04140a;
  --accent: #4ade80;
  --accent-hover: #74eda1;
  --accent-soft: rgba(74, 222, 128, 0.14);
  --accent-line: rgba(74, 222, 128, 0.45);
  --chord-text: #f0fdf5;
  --chord-accent: #7cf0ab;
  --section-accent: #7cf0ab;
  --lyrics-text: #cfe8da;
  --stage-chrome: rgba(11, 20, 16, 0.88);
}

:root[data-theme="graphite"] {
  color-scheme: dark;
  --bg: #131417;
  --bg-gradient: linear-gradient(180deg, #17181c 0%, #101114 100%);
  --surface-0: #17181c;
  --surface-1: #1d1e23;
  --surface-2: #24252b;
  --surface-3: #2c2e35;
  --surface-hover: #26272e;
  --surface-active: #313339;
  --border: #2c2e35;
  --border-soft: #232429;
  --border-strong: #3b3d46;
  --border-accent: #4b4e58;
  --text: #f4f5f7;
  --text-2: #adb0b8;
  --text-3: #787c86;
  --text-4: #52555e;
  --text-on-accent: #101114;
  --accent: #a8b4ff;
  --accent-hover: #c2caff;
  --accent-soft: rgba(168, 180, 255, 0.14);
  --accent-line: rgba(168, 180, 255, 0.45);
  --chord-text: #f6f7fa;
  --chord-accent: #b9c3ff;
  --section-accent: #b9c3ff;
  --lyrics-text: #d5d7dd;
  --stage-chrome: rgba(29, 30, 35, 0.9);
}

:root[data-theme="moss"] {
  color-scheme: dark;
  --bg: #131813;
  --bg-gradient: linear-gradient(180deg, #171d17 0%, #101410 100%);
  --surface-0: #171d17;
  --surface-1: #1d241c;
  --surface-2: #242c23;
  --surface-3: #2d362b;
  --surface-hover: #262f25;
  --surface-active: #333d31;
  --border: #2b342a;
  --border-soft: #212a20;
  --border-strong: #3b473a;
  --border-accent: #4b5a49;
  --text: #f2f6ee;
  --text-2: #adb9a5;
  --text-3: #7b8875;
  --text-4: #55604f;
  --text-on-accent: #101410;
  --accent: #d6c477;
  --accent-hover: #e6d691;
  --accent-soft: rgba(214, 196, 119, 0.14);
  --accent-line: rgba(214, 196, 119, 0.45);
  --chord-text: #f6faf2;
  --chord-accent: #e0d189;
  --section-accent: #e0d189;
  --lyrics-text: #d8e0d1;
  --stage-chrome: rgba(29, 36, 28, 0.9);
}

:root[data-theme="indigo"] {
  color-scheme: dark;
  --bg: #080a16;
  --bg-gradient: radial-gradient(120% 80% at 70% -18%, rgba(99, 102, 241, 0.22) 0%, transparent 58%), linear-gradient(180deg, #0a0c1a 0%, #060711 100%);
  --surface-0: #0c0f1e;
  --surface-1: #121527;
  --surface-2: #191d33;
  --surface-3: #222642;
  --surface-hover: #171b30;
  --surface-active: #262b48;
  --border: #22263c;
  --border-soft: #191c2e;
  --border-strong: #333955;
  --border-accent: #454c70;
  --text: #eef0ff;
  --text-2: #a3a8cc;
  --text-3: #6f74a0;
  --text-4: #4a4f72;
  --text-on-accent: #06071a;
  --accent: #818cf8;
  --accent-hover: #a5adfb;
  --accent-soft: rgba(129, 140, 248, 0.16);
  --accent-line: rgba(129, 140, 248, 0.5);
  --chord-text: #f2f4ff;
  --chord-accent: #a5b4fc;
  --section-accent: #a5b4fc;
  --lyrics-text: #cdd1f0;
  --stage-chrome: rgba(18, 21, 39, 0.9);
}

/* --------------------------------------------------------------------- */
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --bg-gradient: linear-gradient(180deg, #fbfcfd 0%, #eef1f5 100%);
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #e9edf2;
  --surface-hover: #eef2f6;
  --surface-active: #e1e7ee;
  --border: #dde3ea;
  --border-soft: #e9edf2;
  --border-strong: #c6d0da;
  --border-accent: #aab8c6;
  --text: #14181d;
  --text-2: #4d5967;
  --text-3: #6f7c8a;
  --text-4: #97a3af;
  --text-on-accent: #ffffff;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.1);
  --accent-line: rgba(37, 99, 235, 0.4);
  --success: #15803d;
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.09);
  --warning: #b45309;
  --chord-text: #10151b;
  --chord-token: #05080c;
  --chord-accent: #1d4ed8;
  --section-accent: #1d4ed8;
  --lyrics-text: #2a333d;
  --song-title-default: var(--text);
  --song-title-ice: #1d4ed8;
  --song-title-amber: #b45309;
  --song-title-mint: #047857;
  --song-title-rose: #be185d;
  --stage-bg: #ffffff;
  --stage-text: #0b0f14;
  --stage-chrome: rgba(255, 255, 255, 0.92);
  --stage-chrome-border: rgba(0, 0, 0, 0.1);
  --overlay: rgba(16, 22, 30, 0.34);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 10px 26px -12px rgba(16, 24, 40, 0.28);
  --shadow-lg: 0 30px 64px -28px rgba(16, 24, 40, 0.35);
  --ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--accent-line);
}

:root[data-theme="sepia"] {
  color-scheme: light;
  --bg: #f5efe3;
  --bg-gradient: linear-gradient(180deg, #faf5eb 0%, #f0e8d9 100%);
  --surface-0: #fffdf8;
  --surface-1: #fffdf8;
  --surface-2: #f6efe2;
  --surface-3: #ebe1d0;
  --surface-hover: #f2ead9;
  --surface-active: #e6dcc8;
  --border: #e0d5c1;
  --border-soft: #ece3d3;
  --border-strong: #c9bba1;
  --border-accent: #b3a288;
  --text: #221c14;
  --text-2: #5b5041;
  --text-3: #7d7160;
  --text-4: #a3968333;
  --text-on-accent: #fffdf8;
  --accent: #9a5b2c;
  --accent-hover: #7f4a22;
  --accent-soft: rgba(154, 91, 44, 0.11);
  --accent-line: rgba(154, 91, 44, 0.4);
  --success: #4d7c0f;
  --danger: #b91c1c;
  --danger-soft: rgba(185, 28, 28, 0.09);
  --warning: #a16207;
  --chord-text: #1c1710;
  --chord-token: #120e08;
  --chord-accent: #9a5b2c;
  --section-accent: #9a5b2c;
  --lyrics-text: #3a3125;
  --song-title-default: var(--text);
  --song-title-ice: #2f5d7c;
  --song-title-amber: #a16207;
  --song-title-mint: #4d7c0f;
  --song-title-rose: #a13f5b;
  --stage-bg: #fffdf8;
  --stage-text: #16120c;
  --stage-chrome: rgba(255, 253, 248, 0.92);
  --stage-chrome-border: rgba(34, 28, 20, 0.12);
  --overlay: rgba(34, 28, 20, 0.34);
  --shadow-sm: 0 1px 2px rgba(60, 47, 30, 0.08);
  --shadow-md: 0 10px 26px -12px rgba(60, 47, 30, 0.26);
  --shadow-lg: 0 30px 64px -28px rgba(60, 47, 30, 0.32);
  --ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--accent-line);
}

:root[data-theme="sepia"] {
  --text-4: #a39683;
}