/* ============================================================
   RyHanC Digital Experience — variables.css
   Design tokens. Ganti warna di sini, efeknya nyebar ke semua
   file CSS lain (semuanya pakai var(--...), gak ada hardcode
   warna di file lain kecuali kepepet banget).
============================================================ */

:root{

  /* ---------- Warna dasar: hitam - navy ---------- */
  --bg:           #070b14;   /* base background, hampir hitam tapi ada tint navy */
  --bg-elev:      #0d1526;   /* permukaan kartu / section yang sedikit "naik" */
  --bg-elev-2:    #121b30;   /* satu level lagi di atas elev (nested card) */
  --bg-input:     #0a0f1c;

  /* ---------- Aksen navy (signature warna brand) ---------- */
  --navy:         #3b6bff;   /* aksen utama — tombol, link, highlight */
  --navy-deep:    #1c3aa6;   /* dipakai buat gradient sisi gelap */
  --navy-soft:    #7d9bff;   /* versi terang, buat teks di atas navy gelap */
  --navy-glow:    rgba(59,107,255,0.35);

  /* ---------- Teks ---------- */
  --text:         #eef2fb;
  --text-dim:     #8d96b0;
  --text-faint:   #4d5670;

  /* ---------- Border & garis ---------- */
  --border:       rgba(255,255,255,0.08);
  --border-hi:    rgba(255,255,255,0.16);

  /* ---------- Status (dipakai seperlunya, jangan dominan) ---------- */
  --success:      #34d399;
  --warning:      #f5b94f;

  /* ---------- Font ---------- */
  --f-display: 'Space Grotesk', system-ui, sans-serif; /* judul besar, karakter kuat */
  --f-body:    'Inter', system-ui, sans-serif;          /* body text, gampang dibaca */
  --f-mono:    'JetBrains Mono', monospace;             /* harga, label teknis, kode */

  /* ---------- Spacing scale ---------- */
  --sp-xs:  6px;
  --sp-sm:  12px;
  --sp-md:  20px;
  --sp-lg:  32px;
  --sp-xl:  56px;
  --sp-2xl: 88px;

  /* ---------- Radius ---------- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-pill: 100px;

  /* ---------- Easing ---------- */
  --ease: cubic-bezier(0.22,1,0.36,1);

  /* ---------- Container ---------- */
  --container-w: 1120px;
}