/*
 * Chord Detector design tokens v2 — the light "notation" theme.
 * Token NAMES are the integration API shared by every page; only values change.
 * Light is the product theme (warm paper, one accent, monospace chords);
 * [data-theme="dark"] is the option for the stage / a dim room.
 */
:root,
[data-theme="light"] {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  /* Chords are read as notation, so they get their own monospace face. */
  --font-chord: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Paper */
  --canvas: #f6f5f2;
  --canvas-secondary: #f1efe9;
  --surface: #ffffff;
  --surface-2: #f6f4ef;
  --surface-hover: #efece5;
  --surface-elevated: #ffffff;

  /* Ink */
  --ink: #1d1b18;
  --ink-secondary: #57524a;
  --ink-tertiary: #6f6960;
  --stroke: #e7e4dd;
  --stroke-strong: #d9d5cc;

  /* One warm accent, taken from the mockups (#e2552b). */
  --accent: #e2552b;
  --accent-hover: #c8471f;
  --accent-on: #ffffff;
  --accent-soft: #fceee7;
  --accent-rgb: 226, 85, 43;
  --accent-alt: #a8481f;
  /* Small accent text and filled buttons: #e2552b is 3.8:1 on white, this is 4.8:1. */
  --accent-strong: #b23f18;

  /* Sheet */
  --chord: var(--accent);
  --lyric: var(--ink);
  /* Current line while the track plays: warm wash plus a left bar. */
  --now-bg: #fff3ec;
  --now-bar: var(--accent);
  /* User-adjustable lead-sheet size (song page control); 17px is the default. */
  --sheet-size: 17px;

  /* Sticky bottom player */
  --player-h: 64px;
  --player-bg: #1d1b18;
  --player-ink: #f6f5f2;
  --player-track: #4a4540;

  --wave-start: #e2552b;
  --wave-end: #ef8a5f;
  --wave-inactive: #dcd8d0;

  --positive: #2f9e5b;
  --positive-soft: #e8f6ee;
  /* Small green text on positive-soft. */
  --positive-strong: #1f7a45;
  --warning: #a9700f;
  --warning-soft: #fdf3e2;
  --danger: #b3261e;
  --danger-soft: #fdeeec;

  --header-bg: rgba(255, 255, 255, .88);
  --glow-one: rgba(226, 85, 43, .10);
  --glow-two: rgba(47, 158, 91, .06);

  --shadow-sm: 0 1px 2px rgba(29, 27, 24, .05), 0 4px 14px rgba(29, 27, 24, .045);
  --shadow-md: 0 10px 28px rgba(29, 27, 24, .08);
  --shadow-lg: 0 24px 60px rgba(29, 27, 24, .12);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --container: 1180px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --ease: cubic-bezier(.22, .7, .2, 1);
  --motion-fast: 150ms;
  --motion-med: 240ms;
}

[data-theme="dark"] {
  color-scheme: dark;
  /* A dim room, not a neon dashboard: warm graphite paper, same single accent. */
  --canvas: #141311;
  --canvas-secondary: #1a1916;
  --surface: #1e1d19;
  --surface-2: #24231e;
  --surface-hover: #2b2a24;
  --surface-elevated: #282722;

  --ink: #f2efe8;
  --ink-secondary: #beb8aa;
  --ink-tertiary: #8d877a;
  --stroke: #322f28;
  --stroke-strong: #423e35;

  --accent: #ff7a4d;
  --accent-hover: #ff9366;
  /* Dark text on the bright accent: white would fall under 3:1. */
  --accent-on: #201008;
  --accent-soft: #3a2016;
  --accent-rgb: 255, 122, 77;
  --accent-alt: #ffa684;
  /* The dark accent already clears 4.5:1 on its soft tint. */
  --accent-strong: var(--accent);

  --now-bg: #322016;
  --now-bar: var(--accent);

  --player-bg: #0d0c0a;
  --player-ink: #f2efe8;
  --player-track: #423d34;

  --wave-start: #ff7a4d;
  --wave-end: #ffb08a;
  --wave-inactive: #443f36;

  --positive: #5cc98a;
  --positive-soft: #16311f;
  --positive-strong: var(--positive);
  --warning: #e8b25f;
  --warning-soft: #33280f;
  --danger: #ff8b7d;
  --danger-soft: #3a1a16;

  --header-bg: rgba(20, 19, 17, .88);
  --glow-one: rgba(255, 122, 77, .10);
  --glow-two: rgba(92, 201, 138, .05);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
}