/* Dark theme foundation — CSS custom properties for the TheoryTab / dark-mode palette.
   Loaded by `default-tailwind-dark.php` and other dark layouts via the `dark-theme`
   Yii package (see packages-1.8.json).

   Adoption path:
   1. Read these names instead of typing hex codes in new inline styles or <style> blocks.
   2. When refactoring an existing inline color, replace the hex with the matching var().
   3. Keep this file backward compatible — variable names should not change once consumed.

   Naming convention: --tb-<role>[-<modifier>], "tb" = TheoryTab/dark namespace. */

:root {
  /* Page-level backgrounds */
  --tb-bg-base: #0e0f13;
  --tb-bg-elevated: #13141a;
  --tb-bg-deeper: #12131a;
  --tb-bg-card: rgba(255,255,255,0.04);
  --tb-bg-overlay: rgba(0,0,0,0.55);

  /* Borders */
  --tb-border: rgba(255,255,255,0.08);
  --tb-border-strong: rgba(255,255,255,0.12);
  --tb-border-subtle: rgba(255,255,255,0.04);

  /* Text scale */
  --tb-text: #ffffff;
  --tb-text-strong: #e2e8f0;
  --tb-text-secondary: #cbd5e1;
  --tb-text-muted: #94a3b8;
  --tb-text-tertiary: #64748b;
  --tb-text-disabled: #475569;

  /* Accent — TheoryTab blue (matches the dark topbar / sticky-bar icon) */
  --tb-accent: #4499d2;
  --tb-accent-bright: #60a5fa;
  --tb-accent-soft: rgba(68,153,210,0.1);
  --tb-accent-glow: rgba(96,165,250,0.7);

  /* Tooltip / popover background (used in about-section, song-stats, etc) */
  --tb-tooltip-bg: #1e2030;

  /* Scrollbar (matches existing inline rules across browse / chart pages) */
  --tb-scrollbar-thumb: rgba(255,255,255,0.18);
  --tb-scrollbar-thumb-hover: rgba(255,255,255,0.30);
}