/* ══ BASE.CSS — Rokola DJ App ══ */

/* ── TOKENS ───────────────────────────────────────────── */
:root {
  --bg:        #0c0c0e;
  --bg2:       #121215;
  --bg3:       #1c1c21;
  --bg4:       #242429;
  --border:    #2a2a30;
  --border2:   #1e1e23;
  --amber:     #e09428;
  --amber-dim: rgba(224,148,40,0.10);
  --amber-glow:rgba(224,148,40,0.18);
  --green:     #3ecf6a;
  --red:       #f05050;
  --blue:      #4da6ff;
  --purple:    #b87fff;
  --text:      #c8c0b4;
  --text-hi:   #ede8e0;
  --text-dim:  #5a5a65;
  --mono:      'IBM Plex Mono', monospace;
  --sans:      'Syne', sans-serif;
  --tree-w:    260px;
  --player-h:  72px;
  --nav-h:     58px;
  --radius:    10px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --safe-t:    env(safe-area-inset-top, 0px);
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  height: 100%; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }