/* ============================================================
   Design Tokens — BG Genius Player
   ============================================================ */

:root {
  /* ---- Static tokens (theme-independent) ---- */

  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.25rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;
  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --transition-fast:   150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);
  --transition-slow:   400ms var(--ease-out);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --z-content:  1;
  --z-header:   10;
  --z-overlay:  100;
  --z-tooltip:  1000;
  --z-dialog:   500;

  /* ---- Semantic colors (same in both themes) ---- */
  --color-correct:   #4caf50;
  --color-incorrect: #ef5350;
  --color-warning:   #ffb74d;
}

/* ============ DARK THEME (default) ============ */
:root {
  --bg-primary:     #131620;
  --bg-secondary:   #171c2e;
  --bg-surface:     #1a2540;
  --bg-elevated:    #1e2538;
  --bg-input:       #0f1f35;

  --text-primary:   #e8e8e8;
  --text-secondary: #94a3b8;
  --text-accent:    #64ffda;
  --text-muted:     #64748b;

  --color-accent:   #64ffda;

  --accent-bg-subtle:     rgba(100, 255, 218, 0.04);
  --accent-bg:            rgba(100, 255, 218, 0.06);
  --accent-bg-hover:      rgba(100, 255, 218, 0.08);
  --accent-bg-active:     rgba(100, 255, 218, 0.12);
  --accent-bg-strong:     rgba(100, 255, 218, 0.18);

  --accent-border:        rgba(100, 255, 218, 0.08);
  --accent-border-hover:  rgba(100, 255, 218, 0.12);
  --accent-border-strong: rgba(100, 255, 218, 0.25);

  --accent-glow:          rgba(100, 255, 218, 0.3);

  --border-subtle:        rgba(255, 255, 255, 0.04);
  --border-default:       rgba(255, 255, 255, 0.06);
  --border-emphasis:      rgba(255, 255, 255, 0.10);
  --border-strong:        rgba(255, 255, 255, 0.15);

  --surface-hover:        rgba(255, 255, 255, 0.04);
  --surface-active:       rgba(255, 255, 255, 0.06);
  --surface-emphasis:     rgba(255, 255, 255, 0.08);

  --overlay-bg:           rgba(0, 0, 0, 0.6);

  --shadow-sm:  0 1px 3px  rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);

  --scrollbar-thumb:       rgba(100, 255, 218, 0.15);
  --scrollbar-thumb-hover: rgba(100, 255, 218, 0.25);
}

/* ============ LIGHT THEME ============ */

/* Auto (OS preference) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-primary:     #f8fafc;
    --bg-secondary:   #f1f5f9;
    --bg-surface:     #e2e8f0;
    --bg-elevated:    #ffffff;
    --bg-input:       #ffffff;

    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-accent:    #0d9373;
    --text-muted:     #94a3b8;

    --color-accent:   #0d9373;

    --accent-bg-subtle:     rgba(13, 147, 115, 0.04);
    --accent-bg:            rgba(13, 147, 115, 0.06);
    --accent-bg-hover:      rgba(13, 147, 115, 0.08);
    --accent-bg-active:     rgba(13, 147, 115, 0.12);
    --accent-bg-strong:     rgba(13, 147, 115, 0.18);

    --accent-border:        rgba(13, 147, 115, 0.12);
    --accent-border-hover:  rgba(13, 147, 115, 0.20);
    --accent-border-strong: rgba(13, 147, 115, 0.35);

    --accent-glow:          rgba(13, 147, 115, 0.25);

    --border-subtle:        rgba(0, 0, 0, 0.04);
    --border-default:       rgba(0, 0, 0, 0.08);
    --border-emphasis:      rgba(0, 0, 0, 0.12);
    --border-strong:        rgba(0, 0, 0, 0.18);

    --surface-hover:        rgba(0, 0, 0, 0.03);
    --surface-active:       rgba(0, 0, 0, 0.05);
    --surface-emphasis:     rgba(0, 0, 0, 0.07);

    --overlay-bg:           rgba(0, 0, 0, 0.4);

    --shadow-sm:  0 1px 3px  rgba(0, 0, 0, 0.08);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.15);

    --scrollbar-thumb:       rgba(0, 0, 0, 0.15);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
  }
}

/* Manual override */
:root[data-theme="light"] {
  --bg-primary:     #f8fafc;
  --bg-secondary:   #f1f5f9;
  --bg-surface:     #e2e8f0;
  --bg-elevated:    #ffffff;
  --bg-input:       #ffffff;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-accent:    #0d9373;
  --text-muted:     #94a3b8;

  --color-accent:   #0d9373;

  --accent-bg-subtle:     rgba(13, 147, 115, 0.04);
  --accent-bg:            rgba(13, 147, 115, 0.06);
  --accent-bg-hover:      rgba(13, 147, 115, 0.08);
  --accent-bg-active:     rgba(13, 147, 115, 0.12);
  --accent-bg-strong:     rgba(13, 147, 115, 0.18);

  --accent-border:        rgba(13, 147, 115, 0.12);
  --accent-border-hover:  rgba(13, 147, 115, 0.20);
  --accent-border-strong: rgba(13, 147, 115, 0.35);

  --accent-glow:          rgba(13, 147, 115, 0.25);

  --border-subtle:        rgba(0, 0, 0, 0.04);
  --border-default:       rgba(0, 0, 0, 0.08);
  --border-emphasis:      rgba(0, 0, 0, 0.12);
  --border-strong:        rgba(0, 0, 0, 0.18);

  --surface-hover:        rgba(0, 0, 0, 0.03);
  --surface-active:       rgba(0, 0, 0, 0.05);
  --surface-emphasis:     rgba(0, 0, 0, 0.07);

  --overlay-bg:           rgba(0, 0, 0, 0.4);

  --shadow-sm:  0 1px 3px  rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.15);

  --scrollbar-thumb:       rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
}