/* ==============================================
   theme.css — Ganti variabel di sini untuk ubah tema
   ============================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&family=Bebas+Neue&family=Roboto+Mono:wght@400;700&display=swap');

:root {
  /* Warna Utama */
  --bg-page:        #0d0118;
  --bg-card:        #1a0533;
  --bg-card2:       #1e1040;
  --bg-panel:       #130d2e;
  --bg-header:      #0a0015;

  --color-primary:  #7c3aed;
  --color-accent:   #ec4899;
  --color-highlight:#ffd700;
  --color-success:  #16a34a;
  --color-recall:   #d97706;
  --color-danger:   #be123c;
  --color-muted:    #475569;
  --color-border:   rgba(124, 58, 237, 0.3);

  /* Teks */
  --text-primary:   #ffffff;
  --text-secondary: #a78bfa;
  --text-muted:     #94a3b8;

  /* Glow effects */
  --glow-primary:   0 0 30px rgba(124, 58, 237, 0.5);
  --glow-accent:    0 0 30px rgba(236, 72, 153, 0.5);
  --glow-success:   0 0 20px rgba(22, 163, 74, 0.4);

  /* Font */
  --font-display:   'Bebas Neue', sans-serif;
  --font-body:      'Poppins', sans-serif;
  --font-mono:      'Roboto Mono', monospace;

  /* Radius & Spacing */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
}

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

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

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-card); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }