/**
 * vars.css — ŘΨØŬ v2.1.0
 * Design tokens: warna, spacing, radius, motion, typography
 * Base palette: Navy #113355 + Electric Cyan #22d3ee
 */
:root {
  /* ── Accent ── */
  --clr-accent:        #22d3ee;
  --clr-accent-dim:    #06b6d4;
  --clr-accent-vivid:  #38e4ff;
  --clr-accent-glow:   rgba(34,211,238,.20);
  --clr-accent-subtle: rgba(34,211,238,.08);
  --clr-accent-border: rgba(34,211,238,.22);

  /* ── Backgrounds ── */
  --bg-base:   #06101e;   /* halaman utama */
  --bg-raised: #091828;   /* card, panel */
  --bg-float:  #0d2035;   /* input, dropdown */
  --bg-glass:  rgba(6,16,30,.88);

  /* ── Surface / Card ── */
  --srf-01: #113355;      /* base card — spec kamu */
  --srf-02: #1a3d65;      /* raised card */
  --srf-03: #1e4878;      /* hover state */

  /* ── Border ── */
  --bdr-subtle: rgba(255,255,255,.06);
  --bdr-mid:    rgba(34,211,238,.12);
  --bdr-strong: rgba(34,211,238,.25);

  /* ── Text ── */
  --txt-primary : #e4edf7;
  --txt-secondary: #8aadcc;
  --txt-tertiary : #3f607d;
  --txt-inverse  : #06101e;

  /* ── Status ── */
  --clr-success: #22c55e;
  --clr-warning: #f59e0b;
  --clr-danger : #ef4444;
  --clr-info   : #60a5fa;

  /* ── Nav ── */
  --nav-h: 60px;

  /* ── Radius ── */
  --r-xs : 4px;
  --r-sm : 8px;
  --r-md : 12px;
  --r-lg : 16px;
  --r-xl : 22px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ── Spacing scale ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ── Shadow ── */
  --shadow-sm : 0 1px 4px rgba(0,0,0,.3);
  --shadow-md : 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg : 0 8px 32px rgba(0,0,0,.5);
  --shadow-xl : 0 16px 56px rgba(0,0,0,.65);
  --shadow-glow: 0 0 20px var(--clr-accent-glow);

  /* ── Motion ── */
  --ease:      cubic-bezier(.4,0,.2,1);
  --ease-out:  cubic-bezier(0,.55,.45,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .15s;
  --dur-base: .22s;
  --dur-slow: .38s;

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-size-xs  : 11px;
  --font-size-sm  : 13px;
  --font-size-base: 14px;
  --font-size-md  : 15px;
  --font-size-lg  : 18px;
  --font-size-xl  : 22px;
  --font-size-2xl : 28px;
  --font-size-3xl : 36px;

  /* ── Z-index layers ── */
  --z-base    :   1;
  --z-dropdown: 100;
  --z-sticky  : 200;
  --z-overlay : 500;
  --z-modal   : 700;
  --z-nav     : 900;
  --z-toast   : 1000;
  --z-splash  : 9999;
}