/* =====================================================================
   DESIGN TOKENS
   PENTING: nama variable (--bg, --card, --ink, dst) SENGAJA dipertahankan
   sama persis kayak versi lama, karena dipakai luas di banyak inline
   style="..." di index.html. Yang berubah cuma NILAI-nya + tambahan
   token baru (spacing/radius/shadow/motion/mono) yang bener2 baru.
   ===================================================================== */
:root{
  /* ---- light (default) ---- */
  --bg: #F4F5F8;
  --card: #FFFFFF;
  --ink: #14161C;
  --muted: #6B7086;
  --line: #E7E8EF;
  --accent: #16A863;
  --accent-ink: #04140C;
  --good: #16A863;
  --warn: #C8871E;
  --danger: #D8434A;
  --accent-wash: rgba(22,168,99,.12);
  --danger-wash: rgba(216,67,74,.12);
  --warn-wash: rgba(200,135,30,.14);

  --surface-sunken: #EBECF2;
  --grid-dot: rgba(20,22,30,.05);
  --topbar-bg: rgba(255,255,255,.82);

  /* ---- shared (sama di kedua tema) ---- */
  --font-ui: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;

  --shadow-card: 0 1px 2px rgba(20,22,30,.04), 0 8px 20px -10px rgba(20,22,30,.10);
  --shadow-modal: 0 4px 8px rgba(20,22,30,.08), 0 24px 48px -16px rgba(20,22,30,.18);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s;
  --dur-med: .3s;

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

html[data-theme="dark"]{
  --bg: #0A0B0D;
  --card: #131519;
  --ink: #EDEEF2;
  --muted: #888D9B;
  --line: rgba(255,255,255,.08);
  --accent: #22D68E;
  --accent-ink: #04140C;
  --good: #22D68E;
  --warn: #F0B93D;
  --danger: #FF5D62;
  --accent-wash: rgba(34,214,142,.14);
  --danger-wash: rgba(255,93,98,.16);
  --warn-wash: rgba(240,185,61,.16);

  --surface-sunken: #08090B;
  --grid-dot: rgba(255,255,255,.055);
  --topbar-bg: rgba(19,21,25,.82);

  --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);
}