/* =====================================================================
   DESIGN TOKENS
   Satu sumber kebenaran buat warna, spacing, radius, shadow, motion.
   Ubah di sini, kepakai ke semua komponen.
   ===================================================================== */
:root{
  /* surface */
  --bg: #0A0B0D;
  --surface: #131519;
  --surface-raised: #1B1E24;
  --surface-sunken: #08090B;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);

  /* ink */
  --ink: #EDEEF2;
  --ink-bright: #FFFFFF;
  --muted: #888D9B;
  --faint: #52566A;

  /* brand + status semantics (unused=amber, active=green, revoked=red) */
  --accent: #22D68E;
  --accent-dim: #16A863;
  --accent-ink: #04140C;
  --accent-wash: rgba(34,214,142,.12);
  --accent-ring: rgba(34,214,142,.35);

  --amber: #F0B93D;
  --amber-wash: rgba(240,185,61,.12);

  --danger: #FF5D62;
  --danger-wash: rgba(255,93,98,.12);

  /* type */
  --font-ui: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* radius: tighter, more tool-like than bubbly */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;

  /* shadow: single restrained layer, not a floating-glass stack */
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 24px -12px rgba(0,0,0,.5);
  --shadow-modal: 0 4px 8px rgba(0,0,0,.35), 0 24px 48px -16px rgba(0,0,0,.6);

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s;
  --dur-med: .3s;
  --dur-slow: .5s;

  --z-modal: 1000;
  --z-toast: 2000;
}