/* ================================================================
   css/variables.css — Virtual Lab TJKT
   Design Tokens: Warna, Tipografi, Spasi, Bayangan, Transisi
   Ubah nilai di sini untuk mengganti tema seluruh aplikasi.
   ================================================================ */

:root {
  /* ---- Warna Latar ---- */
  --bg-base:      #0a0e1a;   /* Latar belakang paling gelap      */
  --bg-surface:   #0f1629;   /* Panel / card utama               */
  --bg-elevated:  #162035;   /* Elemen yang "lebih tinggi"       */
  --bg-highlight: #1c2a45;   /* Hover state                      */

  /* ---- Aksen Neon ---- */
  --accent:        #00f0ff;                   /* Cyan neon — warna utama      */
  --accent-dim:    #0099cc;                   /* Cyan redup untuk variasi     */
  --accent-glow:   rgba(0, 240, 255, 0.15);  /* Efek glow                    */
  --accent-purple: #a78bfa;                   /* Ungu — digunakan OPM         */
  --accent-orange: #fb923c;                   /* Oranye — digunakan OTDR      */
  --accent-green:  #34d399;                   /* Hijau — digunakan Multimeter */

  /* ---- Teks ---- */
  --text-primary:   #e8f4ff;  /* Teks utama              */
  --text-secondary: #7a9abf;  /* Teks sekunder/keterangan */
  --text-muted:     #4a6a8a;  /* Teks sangat redup        */

  /* ---- Status ---- */
  --color-success: #22c55e;
  --color-error:   #ef4444;
  --color-warning: #f59e0b;

  /* ---- Border ---- */
  --border:        rgba(0, 240, 255, 0.12);
  --border-active: rgba(0, 240, 255, 0.4);

  /* ---- Tipografi ---- */
  --font-main: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  /* ---- Spasi (8-point grid) ---- */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */

  /* ---- Border Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ---- Bayangan ---- */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* ---- Transisi Global ---- */
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}