/*
╔══════════════════════════════════════════════════════════════════╗
║  css/variables.css — Design Token System                        ║
║  Semua variabel warna, font, ukuran, dan spacing ada di sini.   ║
║  Ubah nilai di sini untuk mengganti tema seluruh game           ║
╚══════════════════════════════════════════════════════════════════╝

PANDUAN WARNA:
  Biru Teknologi = nuansa profesional, IT, dunia jaringan
  Kuning K3      = standar internasional warna keselamatan kerja
  Hitam/Abu gelap= latar modern, kesan terminal/server
  Hijau Sukses   = feedback positif
  Merah Bahaya   = feedback negatif, alert
*/

:root {
  /* ── PALET UTAMA ── */
  --blue-900: #0a0e1a;    /* Hitam biru gelap — latar utama game */
  --blue-800: #0d1526;    /* Latar kartu gelap */
  --blue-700: #122240;    /* Border gelap */
  --blue-600: #1a3a6b;    /* Biru tengah */
  --blue-500: #1e5fc4;    /* Biru primer — tombol utama */
  --blue-400: #3b82f6;    /* Biru aksen terang */
  --blue-300: #60a5fa;    /* Biru muda — highlight */
  --blue-200: #93c5fd;    /* Biru sangat muda */
  --blue-100: #dbeafe;    /* Biru pucat — teks terang di atas gelap */

  /* ── KUNING K3 ── */
  --yellow-500: #f59e0b;  /* Kuning K3 utama — safety yellow */
  --yellow-400: #fbbf24;  /* Kuning aksen */
  --yellow-300: #fcd34d;  /* Kuning terang — highlight */
  --yellow-100: #fef3c7;  /* Kuning pucat */

  /* ── STATUS WARNA ── */
  --green-500:  #10b981;  /* Sukses / benar */
  --green-400:  #34d399;  /* Sukses terang */
  --green-900:  #064e3b;  /* Latar sukses gelap */
  --red-500:    #ef4444;  /* Error / salah / bahaya */
  --red-400:    #f87171;  /* Error terang */
  --red-900:    #450a0a;  /* Latar error gelap */
  --orange-500: #f97316;  /* Peringatan */
  --orange-100: #ffedd5;  /* Latar peringatan */

  /* ── TEKS ── */
  --text-primary:   #e2e8f0;   /* Teks utama di latar gelap */
  --text-secondary: #94a3b8;   /* Teks sub / keterangan */
  --text-muted:     #4a5568;   /* Teks sangat redup */
  --text-heading:   #f1f5f9;   /* Judul-judul */
  --text-accent:    #60a5fa;   /* Teks link / aksen */
  --text-k3:        #fbbf24;   /* Teks K3 kuning */

  /* ── LATAR BELAKANG ── */
  --bg-page:    #0a0e1a;   /* Latar page utama */
  --bg-card:    #111827;   /* Latar kartu komponen */
  --bg-card-2:  #1f2937;   /* Latar kartu sekunder */
  --bg-input:   #1a2540;   /* Latar form input */
  --bg-overlay: rgba(0, 0, 0, 0.75);  /* Overlay modal */

  /* ── BORDER ── */
  --border-dark:   rgba(255, 255, 255, 0.06);  /* Border sangat halus */
  --border-mid:    rgba(255, 255, 255, 0.12);  /* Border normal */
  --border-blue:   rgba(59, 130, 246, 0.3);    /* Border bertema biru */
  --border-yellow: rgba(251, 191, 36, 0.4);    /* Border bertema kuning */

  /* ── TIPOGRAFI ── */
  --font-display: 'Orbitron', sans-serif;       /* Judul utama techy */
  --font-body:    'Rajdhani', sans-serif;        /* Teks konten utama */
  --font-mono:    'Share Tech Mono', monospace;  /* Kode / terminal */

  /* Skala font */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* Ketebalan font */
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── SPACING ── */
  --sp-1:  0.25rem;    /* 4px */
  --sp-2:  0.5rem;     /* 8px */
  --sp-3:  0.75rem;    /* 12px */
  --sp-4:  1rem;       /* 16px */
  --sp-5:  1.25rem;    /* 20px */
  --sp-6:  1.5rem;     /* 24px */
  --sp-8:  2rem;       /* 32px */
  --sp-10: 2.5rem;     /* 40px */
  --sp-12: 3rem;       /* 48px */
  --sp-16: 4rem;       /* 64px */

  /* ── BORDER RADIUS ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── SHADOW / GLOW ── */
  --shadow-card:   0 4px 24px rgba(0,0,0,0.4);
  --shadow-blue:   0 0 20px rgba(59, 130, 246, 0.4);
  --shadow-yellow: 0 0 20px rgba(251, 191, 36, 0.4);
  --shadow-green:  0 0 16px rgba(16, 185, 129, 0.4);
  --shadow-red:    0 0 16px rgba(239, 68, 68, 0.4);

  /* ── TRANSISI ── */
  --tr-fast:   all 0.15s ease;
  --tr-base:   all 0.25s ease;
  --tr-slow:   all 0.4s ease;
  --tr-spring: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ── */
  --header-h:   60px;    /* Tinggi game header */
  --stage-max:  960px;   /* Lebar maksimal konten stage */
  --sidebar-w:  280px;   /* Lebar sidebar (jika dipakai) */
  --z-base:     1;
  --z-scene:    10;
  --z-hotspot:  20;
  --z-header:   100;
  --z-modal:    200;
  --z-toast:    300;
  --z-mute-btn: 400;
}

/* ── DARK MODE: sudah gelap by default, ini untuk override ── */
@media (prefers-color-scheme: light) {
  /* Game ini by design selalu dark mode (tema server room) */
  /* Tidak ada override — intentional design choice */
}