/* ============================================================
   TAHTA PETIR — DESIGN TOKENS
   Tema: Badai Olympus — langit malam biru-nila, petir emas,
   marmer pucat, orb nila menyala.

   Semua nilai desain hidup di sini. Berkas lain hanya boleh memakai
   var(--...), tidak pernah menulis warna mentah.
   ============================================================ */

.lpxg {
  color-scheme: dark;

  /* ---------- LANGIT / PERMUKAAN ---------- */
  --sky-abyss: #03050f;
  --sky-900: #060a18;
  --sky-800: #0a1128;
  --sky-700: #0f1a3a;
  --sky-600: #16264f;
  --sky-500: #1f3468;

  --glass: rgb(15 26 58 / 62%);
  --glass-strong: rgb(10 17 40 / 88%);
  --glass-edge: rgb(207 232 255 / 14%);

  /* ---------- GARIS ---------- */
  --line-faint: rgb(255 255 255 / 7%);
  --line: #1f3468;
  --line-bright: #2e4a8c;

  /* ---------- TEKS ----------
     Kontras diukur terhadap --sky-900 (#060a18):
     hi  #eef3ff -> 17,1:1   base #c2cfea -> 11,0:1
     mid #93a4cc ->  6,3:1   lo   #7387b5 ->  4,6:1  (ambang AA tepat terlampaui) */
  --ink-hi: #eef3ff;
  --ink: #c2cfea;
  --ink-mid: #93a4cc;
  --ink-lo: #7387b5;
  --ink-on-gold: #1a1204;
  --ink-on-bolt: #04101c;

  /* ---------- PETIR (aksen utama) ---------- */
  --bolt-100: #fff6d6;
  --bolt-200: #ffe9a3;
  --bolt-300: #ffd166;
  --bolt-400: #f5a524;
  --bolt-500: #d97706;
  --bolt-600: #92400e;

  /* ---------- KILAT DINGIN (aksen kedua) ---------- */
  --arc-100: #eaf6ff;
  --arc-200: #bfe4ff;
  --arc-300: #7dd3fc;
  --arc-400: #38bdf8;
  --arc-500: #0284c7;

  /* ---------- ORB PENGALI ---------- */
  --orb-100: #f0e2ff;
  --orb-200: #d7b6ff;
  --orb-300: #9d5cff;
  --orb-400: #7c3aed;
  --orb-500: #4c1d95;

  /* ---------- STATUS ---------- */
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;

  /* ---------- PERAN SEMANTIK ---------- */
  --accent: var(--bolt-300);
  --accent-deep: var(--bolt-500);
  --info: var(--arc-300);

  /* ---------- GRADIEN ---------- */
  --grad-bolt: linear-gradient(158deg, var(--bolt-100) 0%, var(--bolt-300) 44%, var(--bolt-500) 100%);
  --grad-arc: linear-gradient(158deg, var(--arc-100) 0%, var(--arc-300) 48%, var(--arc-500) 100%);
  --grad-orb: linear-gradient(158deg, var(--orb-100) 0%, var(--orb-300) 50%, var(--orb-500) 100%);
  --grad-sheen: linear-gradient(180deg, rgb(255 255 255 / 6%) 0%, rgb(255 255 255 / 0%) 62%);

  /* ---------- CAHAYA ---------- */
  --glow-bolt: 0 0 0 1px rgb(255 209 102 / 34%), 0 0 26px -5px rgb(255 209 102 / 58%);
  --glow-arc: 0 0 0 1px rgb(125 211 252 / 34%), 0 0 26px -5px rgb(125 211 252 / 58%);
  --glow-orb: 0 0 0 1px rgb(157 92 255 / 38%), 0 0 26px -5px rgb(157 92 255 / 62%);

  /* ---------- BAYANGAN ---------- */
  --shadow-sm: 0 1px 2px rgb(3 5 15 / 62%);
  --shadow-md: 0 4px 14px -3px rgb(3 5 15 / 68%);
  --shadow-lg: 0 18px 44px -14px rgb(3 5 15 / 82%);
  --shadow-xl: 0 34px 84px -26px rgb(3 5 15 / 92%);
  --shadow-in: inset 0 1px 0 rgb(255 255 255 / 9%);

  /* ---------- RADIUS ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SPASI (kelipatan 4) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ---------- TIPOGRAFI ----------
     Cinzel  : huruf berpahat bergaya prasasti Yunani — untuk judul & merek
     Rajdhani: huruf teknis rapat — untuk antarmuka & angka

     Setiap variabel diakhiri tumpukan font sistem, jadi bila berkas font
     gagal dimuat (luring, jaringan diblokir) halaman tetap terbaca rapi.

     Cinzel hanya tersedia dalam beberapa ketebalan; elemen yang memakainya
     menyetel font-synthesis: none agar browser tidak memalsukan huruf tebal. */
  --font-ui:
    Rajdhani, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-display:
    Cinzel, 'Segoe UI Variable Display', 'SF Pro Display', ui-serif, Georgia, serif;
  --font-num:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono',
    Menlo, Consolas, monospace;

  /* Teks isi dijaga 16px: di bawah itu iOS memperbesar halaman sendiri
     saat input difokuskan, dan keterbacaan di ponsel menurun. */
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --track-wide: 0.05em;
  --track-wider: 0.14em;

  /* ---------- GERAK ---------- */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-slower: 700ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Faktor kecepatan global. Dibaca JUGA oleh mesin 3D lewat
     getComputedStyle, sehingga satu setelan mengatur CSS dan WebGL sekaligus. */
  --motion-scale: 1;

  /* ---------- LAPISAN ---------- */
  --z-stage: 1;
  --z-overlay: 20;
  --z-header: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* ---------- UKURAN ---------- */
  --tap-min: 44px;
  --shell-max: 1240px;
  --header-h: 60px;
}

/* Pengguna yang meminta gerak dikurangi. Durasi tidak dinolkan penuh agar
   perubahan keadaan tetap terbaca mata. */
@media (prefers-reduced-motion: reduce) {
  .lpxg {
    --motion-scale: 0.35;
    --dur-slow: 140ms;
    --dur-slower: 180ms;
  }
}

/* Pilihan manual di menu Pengaturan mengalahkan preferensi sistem operasi. */
.lpxg[data-motion='reduced'] {
  --motion-scale: 0.35;
  --dur-slow: 140ms;
  --dur-slower: 180ms;
}

.lpxg[data-motion='full'] {
  --motion-scale: 1;
  --dur-slow: 400ms;
  --dur-slower: 700ms;
}