/* ==========================================================================
   Guitar Repertoire Suite - Tokenized Developer Theme Engine
   7 Developer Colorways: OLED, Gruvbox, Dracula, Nord, Catppuccin, Monokai, Solarized
   ========================================================================== */

:root {
  /* Typography Scale */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
  --font-size-3xl: 2.5rem;     /* 40px */
  --font-size-chord: clamp(2.5rem, 5vw, 4.5rem);
  --font-size-lyrics: clamp(1rem, 2vw, 1.35rem);

  /* Shared Radii & Transitions */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --transition-instant: 75ms cubic-bezier(0, 0, 0.2, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Default Colorway: OLED */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-surface: #121212;
  --bg-underground: #050505;

  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --text-muted: #6b7280;

  --border-color: #262626;
  --border-focus: #10b981;

  --accent-primary: #10b981;
  --accent-pulse: #06b6d4;
  --accent-underground: #f59e0b;

  --beat-active-bg: rgba(16, 185, 129, 0.22);
  --ball-color: #10b981;
  --trail-color: rgba(6, 182, 212, 0.45);
}

/* --------------------------------------------------------------------------
   1. OLED (Pure Black & Neon Accents: Emerald, Cyan, Gold)
   -------------------------------------------------------------------------- */
:root.theme-oled,
[data-theme="oled"],
body.theme-oled,
.theme-oled {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-surface: #121212;
  --bg-underground: #050505;

  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --text-muted: #6b7280;

  --border-color: #262626;
  --border-focus: #10b981;

  --accent-primary: #10b981;
  --accent-pulse: #06b6d4;
  --accent-underground: #f59e0b;

  --beat-active-bg: rgba(16, 185, 129, 0.22);
  --ball-color: #10b981;
  --trail-color: rgba(6, 182, 212, 0.45);
}

/* --------------------------------------------------------------------------
   2. GRUVBOX (Warm Retro Dark)
   -------------------------------------------------------------------------- */
:root.theme-gruvbox,
[data-theme="gruvbox"],
body.theme-gruvbox,
.theme-gruvbox {
  --bg-primary: #282828;
  --bg-secondary: #1d2021;
  --bg-surface: #3c3836;
  --bg-underground: #141617;

  --text-primary: #ebdbb2;
  --text-secondary: #d5c4a1;
  --text-muted: #928374;

  --border-color: #504945;
  --border-focus: #fabd2f;

  --accent-primary: #b8bb26;
  --accent-pulse: #fabd2f;
  --accent-underground: #fe8019;

  --beat-active-bg: rgba(184, 187, 38, 0.22);
  --ball-color: #fabd2f;
  --trail-color: rgba(254, 128, 25, 0.45);
}

/* --------------------------------------------------------------------------
   3. DRACULA (Classic Vampire Palette)
   -------------------------------------------------------------------------- */
:root.theme-dracula,
[data-theme="dracula"],
body.theme-dracula,
.theme-dracula {
  --bg-primary: #282a36;
  --bg-secondary: #21222c;
  --bg-surface: #44475a;
  --bg-underground: #191a21;

  --text-primary: #f8f8f2;
  --text-secondary: #e2e8f0;
  --text-muted: #6272a4;

  --border-color: #44475a;
  --border-focus: #bd93f9;

  --accent-primary: #bd93f9;
  --accent-pulse: #50fa7b;
  --accent-underground: #ff79c6;

  --beat-active-bg: rgba(80, 250, 123, 0.22);
  --ball-color: #8be9fd;
  --trail-color: rgba(255, 121, 198, 0.45);
}

/* --------------------------------------------------------------------------
   4. NORD (Arctic, North-Bluish)
   -------------------------------------------------------------------------- */
:root.theme-nord,
[data-theme="nord"],
body.theme-nord,
.theme-nord {
  --bg-primary: #2e3440;
  --bg-secondary: #242933;
  --bg-surface: #3b4252;
  --bg-underground: #1f232b;

  --text-primary: #eceff4;
  --text-secondary: #e5e9f0;
  --text-muted: #4c566a;

  --border-color: #434c5e;
  --border-focus: #88c0d0;

  --accent-primary: #88c0d0;
  --accent-pulse: #81a1c1;
  --accent-underground: #a3be8c;

  --beat-active-bg: rgba(136, 192, 208, 0.22);
  --ball-color: #88c0d0;
  --trail-color: rgba(129, 161, 193, 0.45);
}

/* --------------------------------------------------------------------------
   5. CATPPUCCIN (Mocha Flavor)
   -------------------------------------------------------------------------- */
:root.theme-catppuccin,
[data-theme="catppuccin"],
body.theme-catppuccin,
.theme-catppuccin {
  --bg-primary: #1e1e2e;
  --bg-secondary: #181825;
  --bg-surface: #313244;
  --bg-underground: #11111b;

  --text-primary: #cdd6f4;
  --text-secondary: #bac2de;
  --text-muted: #6c7086;

  --border-color: #45475a;
  --border-focus: #74c7ec;

  --accent-primary: #74c7ec;
  --accent-pulse: #a6e3a1;
  --accent-underground: #fab387;

  --beat-active-bg: rgba(166, 227, 161, 0.22);
  --ball-color: #74c7ec;
  --trail-color: rgba(250, 179, 135, 0.45);
}

/* --------------------------------------------------------------------------
   6. MONOKAI (Monokai Pro)
   -------------------------------------------------------------------------- */
:root.theme-monokai,
[data-theme="monokai"],
body.theme-monokai,
.theme-monokai {
  --bg-primary: #2d2a2e;
  --bg-secondary: #221f22;
  --bg-surface: #403e41;
  --bg-underground: #19181a;

  --text-primary: #fcfcfa;
  --text-secondary: #c1c0c0;
  --text-muted: #727072;

  --border-color: #4d4a4e;
  --border-focus: #ffd866;

  --accent-primary: #a9dc76;
  --accent-pulse: #ffd866;
  --accent-underground: #ff6188;

  --beat-active-bg: rgba(169, 220, 118, 0.22);
  --ball-color: #ffd866;
  --trail-color: rgba(255, 97, 136, 0.45);
}

/* --------------------------------------------------------------------------
   7. SOLARIZED (Solarized Dark)
   -------------------------------------------------------------------------- */
:root.theme-solarized,
[data-theme="solarized"],
body.theme-solarized,
.theme-solarized {
  --bg-primary: #002b36;
  --bg-secondary: #073642;
  --bg-surface: #0e4452;
  --bg-underground: #001f27;

  --text-primary: #839496;
  --text-secondary: #93a1a1;
  --text-muted: #586e75;

  --border-color: #0b4958;
  --border-focus: #2aa198;

  --accent-primary: #268bd2;
  --accent-pulse: #2aa198;
  --accent-underground: #b58900;

  --beat-active-bg: rgba(42, 161, 152, 0.22);
  --ball-color: #2aa198;
  --trail-color: rgba(38, 139, 210, 0.45);
}

/* ==========================================================================
   Base Theme Application
   ========================================================================== */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family-sans);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}