/* ============================================================
   DIGR DESIGN TOKENS — 60-30-10 Color System
   Inspired by Studio Ghibli's color discipline.
   
   60% — Background (the void, the space between)
   30% — Surface (elevated elements: header, cards, controls, player)
   10% — Accent (interactive elements, the thing your eye goes to)
   
   Rule: When everything glows, nothing glows.
   ============================================================ */

:root {
  /* ========== 60% — BACKGROUND (The Void) ========== */
  /* Not pure black. Ghibli never uses true black — always 
     a slightly warm, deep tone that feels like a space 
     you could exist in. */
  --bg-primary: #0e0e16;
  --bg-secondary: #0c0c14;        /* Slightly darker variant */
  --bg-gradient: radial-gradient(ellipse at 50% 30%, #121220 0%, #0e0e16 60%, #0a0a12 100%);
  
  /* ========== 30% — SURFACE (Elevated Elements) ========== */
  /* The layer that sits ON the background. Headers, cards, 
     controls, player bar, modals. Visible separation from 
     the void, but never competing with content. */
  --surface-primary: #181824;
  --surface-secondary: #1e1e2c;    /* Slightly lighter for nested surfaces */
  --surface-hover: #22223a;        /* Hover state for surfaces */
  --surface-border: rgba(255, 255, 255, 0.06);  /* Subtle edge definition */
  --surface-border-hover: rgba(255, 255, 255, 0.1);
  
  /* ========== 10% — ACCENT (The Eye Magnet) ========== */
  /* ONE primary accent. This is where the eye goes.
     Everything interactive. Everything that says "touch me." */
  --accent: #00d4ff;               /* Electric cyan — DIGR's signature */
  --accent-hover: #33e0ff;
  --accent-dim: rgba(0, 212, 255, 0.15);
  --accent-glow: rgba(0, 212, 255, 0.25);
  --accent-subtle: rgba(0, 212, 255, 0.06);
  
  /* ========== RESERVED ACCENTS (Zone-specific, rarity) ========== */
  /* These ONLY appear in their specific context. 
     Never in the base UI chrome. */
  --gold: #d4af37;                 /* Rarity + premium + vault zone indicator */
  --gold-dim: rgba(212, 175, 55, 0.15);
  --purple: #a855f7;               /* Lab zone indicator only */
  --purple-dim: rgba(168, 85, 247, 0.15);
  
  /* ========== TEXT HIERARCHY ========== */
  --text-primary: rgba(255, 255, 255, 0.87);    /* Titles, important content */
  --text-secondary: rgba(255, 255, 255, 0.55);  /* Body text, descriptions */
  --text-tertiary: rgba(255, 255, 255, 0.30);   /* Timestamps, metadata */
  --text-disabled: rgba(255, 255, 255, 0.15);   /* Placeholders, disabled */
  
  /* ========== SEMANTIC ========== */
  --success: #34d399;
  --error: #ef4444;
  --warning: #fbbf24;
  
  /* ========== SHADOWS (Depth through darkness, not color) ========== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   OVERRIDE LEGACY VARIABLES
   Map old variable names to new tokens so existing CSS 
   picks up the new values without rewriting everything.
   ============================================================ */
:root {
  --void: var(--bg-primary);
  --void-light: var(--bg-secondary);
  --surface: var(--surface-primary);
  --border: var(--surface-border);
  
  --cyan: var(--accent);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-muted: var(--text-tertiary);
}

/* ============================================================
   60-30-10 ENFORCEMENT
   Override specific elements to follow the system.
   ============================================================ */

/* === BODY / BACKGROUND (60%) === */
body {
  background: var(--bg-primary) !important;
  color: var(--text-primary);
}

/* The zone background canvas */
.zone-canvas,
#zone-background {
  background: var(--bg-gradient) !important;
}

/* === HEADER (30% — Surface) === */
.header,
header.header {
  background: var(--surface-primary) !important;
  border-bottom: 1px solid var(--surface-border) !important;
  backdrop-filter: blur(12px);
}

/* === DISCOVER CONTROLS BAR (30% — Surface) === */
.discover-header,
.discover-controls {
  background: var(--surface-primary);
  border-bottom: 1px solid var(--surface-border);
}

/* Filter pills / dropdowns */
.discover-controls .filter-pill,
.discover-controls select,
.genre-dropdown,
.bpm-range,
.key-filter,
#sort-dropdown {
  background: var(--surface-secondary);
  border: 1px solid var(--surface-border);
  color: var(--text-secondary);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.discover-controls .filter-pill:hover,
.discover-controls select:hover,
#sort-dropdown:hover {
  border-color: var(--surface-border-hover);
  color: var(--text-primary);
}

/* Active tab in discover controls */
.discover-controls .tab-btn.active,
.discover-controls .filter-pill.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* === BOTTOM NAV (30% — Surface) === */
.zone-nav,
.bottom-nav,
.bottom-nav-inline {
  background: var(--surface-primary) !important;
  border-top: 1px solid var(--surface-border) !important;
}

/* Active zone button — ONLY uses accent */
.zone-btn.active,
.zone-btn[data-zone="underground"].active,
.zone-btn[data-zone="discover"].active {
  background: var(--accent) !important;
  color: #000 !important;
}

/* Lab keeps purple, Vault keeps gold — but subtler */
.zone-btn[data-zone="lab"].active {
  background: var(--purple) !important;
  color: #000 !important;
}

.zone-btn[data-zone="collection"].active,
.zone-btn[data-zone="vault"].active,
.zone-btn[data-zone="library"].active {
  background: var(--gold) !important;
  color: #000 !important;
}

/* Inactive zone buttons */
.zone-btn:not(.active) {
  color: var(--text-tertiary);
}

.zone-btn:not(.active):hover {
  color: var(--text-secondary);
}

/* === PLAYER BAR (30% — Surface) === */
.player,
.player-bar-container,
#player-bar-container {
  background: var(--surface-primary) !important;
  border-top: 1px solid var(--surface-border) !important;
}

/* Player progress = accent */
.player-bar-fill,
.player-progress-fill {
  background: var(--accent) !important;
}

/* === SEARCH BAR (30% — Surface) === */
.search-container,
.search-bar,
#header-search {
  background: var(--surface-secondary);
  border: 1px solid var(--surface-border);
}

.search-container:focus-within,
.search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* === CARDS (The 10% hero) === */
/* Card backgrounds are surfaces, but card ARTWORK is the accent.
   The artwork should be the brightest, most colorful thing on screen.
   Everything around it should recede. */
.ygo-card {
  background: var(--surface-primary);
  border: 1px solid var(--surface-border);
}

.ygo-card:hover {
  border-color: var(--surface-border-hover);
  box-shadow: var(--shadow-lg);
}

/* === MODALS (30% — Surface, elevated) === */
.modal-content,
.upload-modal-v2,
.inline-modal-content {
  background: var(--surface-primary);
  border: 1px solid var(--surface-border);
}

/* === BUTTONS — Primary = Accent === */
.btn-primary,
.upload-btn,
.publish-btn {
  background: var(--accent);
  color: #000;
  border: none;
}

.btn-primary:hover,
.upload-btn:hover,
.publish-btn:hover {
  background: var(--accent-hover);
}

/* === FAB (Floating Action Button) === */
.fab,
.upload-fab,
#upload-fab {
  background: var(--accent) !important;
  color: #000 !important;
  box-shadow: 0 4px 20px var(--accent-glow) !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--surface-hover);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* === TOAST NOTIFICATIONS === */
.toast {
  background: var(--surface-primary);
  border: 1px solid var(--surface-border);
  color: var(--text-primary);
}

/* === KILL THE COLOR NOISE === */
/* Remove green from Underground — it uses accent (cyan) now */
/* Remove scattered pinks, oranges from base UI */
/* Gold is ONLY for rarity badges and vault zone */

/* Zone-specific bg overrides — subtle tinting only */
.zone-discover #zone-background,
.zone-underground #zone-background {
  background: var(--bg-gradient) !important;
}

.zone-collection #zone-background {
  background: radial-gradient(ellipse at 50% 30%, #161210 0%, var(--bg-primary) 60%) !important;
}

.zone-lab #zone-background {
  background: radial-gradient(ellipse at 50% 30%, #14101c 0%, var(--bg-primary) 60%) !important;
}

/* === NOTIFICATION BELL — accent only when unread === */
.notif-badge {
  background: var(--accent) !important;
  color: #000 !important;
}

/* === CONTROL PILLS (Tabs & Filters) === */
/* Active tab → accent, not green-cyan */
.control-pill.tab-pill.is-active {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Active filter → accent, not purple */
.control-pill.filter-pill.has-value {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Active toggle → accent */
.control-pill.toggle-pill.is-active {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Inactive pills → surface */
.control-pill {
  background: var(--surface-secondary);
  border-color: var(--surface-border);
  color: var(--text-secondary);
}

.control-pill:hover {
  border-color: var(--surface-border-hover);
  color: var(--text-primary);
}

/* === SORT PILLS (Vault) === */
.vault-sort-pill.active,
.sort-pill.active {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* === DOWNLOAD ALL / GREEN BUTTONS → Accent === */
.download-all-btn {
  background: var(--accent) !important;
  color: #000 !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

/* === CREDITS DISPLAY === */
.credits-display,
.header-credits {
  color: var(--text-secondary);
}

/* === ZONE NAV LABEL TEXT === */
.zone-btn span,
.zone-btn .zone-label {
  font-size: 9px;
  letter-spacing: 0.5px;
}

/* === LINKS === */
a:not([class]) {
  color: var(--accent);
}

/* === EMPTY STATES === */
.empty-state,
.no-results {
  color: var(--text-tertiary);
}

/* === SUPPRESS GREEN/PINK NOISE IN BASE UI === */
/* These overrides remove the scattered --green and --pink from 
   non-zone-specific UI elements. Zone-specific backgrounds 
   (lab purple tint, vault warm tint) are handled above. */