/**
 * ================================================================
 *  RoxyPiano v2.0 — CSS Design Tokens & Base Styles
 *  © 2026 Roxy Emanuel. All Rights Reserved.
 * ================================================================
 *  File ini berisi variabel CSS terpusat (design tokens) dan
 *  reset dasar. Mengubah variabel di sini akan mempengaruhi
 *  seluruh tampilan aplikasi.
 * ================================================================
 */

/* ── Reset Global ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Warna Background */
  --bg: #0a0a0f;
  --surface: #12121a;
  --surface-2: #1a1a26;
  --surface-3: #22222e;

  /* Warna Border */
  --border: rgba(0,212,255,0.15);
  --border-2: rgba(0,212,255,0.08);

  /* Warna Aksen Utama */
  --accent: #00d4ff;
  --accent-2: #7c3aed;
  --accent-glow: rgba(0,212,255,0.3);
  --accent-2-glow: rgba(124,58,237,0.3);

  /* Warna Teks */
  --text: #e8e8f0;
  --text-muted: #6b6b8a;
  --text-dim: #44445a;

  /* Warna Status */
  --success: #00ff88;
  --error: #ff3366;
  --warning: #ffd700;
  --hint: #ff9500;

  /* Tipografi */
  --font-body: 'Inter', sans-serif;
  --font-display: 'Orbitron', sans-serif;

  /* Jarak & Bentuk */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Animasi */
  --transition: 200ms ease-out;

  /* Glassmorphism */
  --glass-bg: rgba(18,18,26,0.75);
  --glass-border: rgba(0,212,255,0.12);
}

/* ── Base Styles ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
}

/* ── Scrollbar Kustom ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }