/* FRAI-PWA-V1 · tokens.css — satu-satunya sumber warna, radius, spasi, bayangan */
:root{
  --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Inter", ui-monospace, monospace;

  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  --primary:#10B981; --primary-600:#059669; --primary-ink:#04241A; --primary-soft:#D1FAE5;
  --ai:#6366F1; --ai-600:#4F46E5; --ai-soft:#E0E7FF;
  --promo:#FACC15; --promo-ink:#3F2E00;
  --fav:#FB7185;
  --grad-ai: linear-gradient(135deg,#10B981 0%,#22D3EE 45%,#6366F1 100%);
  --grad-ai-soft: linear-gradient(135deg,rgba(16,185,129,.14),rgba(34,211,238,.12) 45%,rgba(99,102,241,.16));

  --dur:180ms; --dur-2:280ms; --ease:cubic-bezier(.2,.8,.2,1);

  --topbar-h:64px; --sidebar-w:260px; --sidebar-w-collapsed:76px; --rail-w:64px; --bottombar-h:64px;
  --z-topbar:60; --z-sidebar:55; --z-rail:50; --z-bottombar:60; --z-sheet:90; --z-toast:100; --z-modal:95;
}

[data-theme="light"]{
  --bg:#F7F8FB; --surface:#FFFFFF; --surface-2:#EEF1F6; --surface-3:#E4E9F1;
  --line:#E3E8EF; --line-strong:#CBD5E1;
  --text:#0B1220; --text-2:#334155; --muted:#5B6577;
  --glass:rgba(255,255,255,.78); --glass-line:rgba(226,232,240,.9);
  --shadow:0 8px 24px rgba(15,23,42,.08); --shadow-lg:0 18px 44px rgba(15,23,42,.14);
  --skeleton:linear-gradient(90deg,#EEF1F6 25%,#F7F8FB 50%,#EEF1F6 75%);
  --overlay:rgba(11,18,32,.42);
}
[data-theme="dark"]{
  --bg:#0B1020; --surface:#121A2E; --surface-2:#18223A; --surface-3:#1E2A45;
  --line:#1F2A44; --line-strong:#2C3B5C;
  --text:#EAF0FF; --text-2:#C7D2E8; --muted:#94A3B8;
  --glass:rgba(18,26,46,.76); --glass-line:rgba(31,42,68,.9);
  --shadow:0 8px 28px rgba(0,0,0,.45); --shadow-lg:0 20px 50px rgba(0,0,0,.55);
  --skeleton:linear-gradient(90deg,#18223A 25%,#1E2A45 50%,#18223A 75%);
  --overlay:rgba(3,7,18,.62);
  --primary-soft:#06301F; --ai-soft:#1B1F45;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur:0ms; --dur-2:0ms; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}