/* ============================================================
   DESIGN TOKENS — MEMBURU PEMANGSA
   Dual-theme: Hitam (default) + Neon Hijau
   ============================================================ */

/* ── TEMA HITAM (default) ── */
:root {
  /* Background */
  --bg:              #020402;
  --screen:          #020a04;
  --panel:           rgba(0, 0, 0, 0.35);

  /* Ink (text) */
  --ink:             #33ff77;
  --ink-dim:         #1c8a41;
  --ink-faint:       #2e6b42;
  --ink-bright:      #c7ffd8;

  /* Lines & borders */
  --line:            #0f3d1f;
  --line-bright:     #1c8a41;

  /* Accent */
  --accent:          #33ff77;
  --accent-hover:    #55ffaa;

  /* Status */
  --danger:          #ff4d5e;
  --amber:           #ffcf4d;
  --locked:          #2e6b42;

  /* Glow */
  --glow:            0 0 12px rgba(51, 255, 119, 0.5);
  --glow-lg:         0 0 22px rgba(51, 255, 119, 0.72);
  --glow-sm:         0 0 6px rgba(51, 255, 119, 0.35);

  /* CRT layer colors */
  --crt-flicker-color:   rgba(51, 255, 119, 0.02);
  --crt-scan-opacity:    1;
  --crt-vig-end:         rgba(0, 0, 0, 0.55);
  --halftone-opacity:    0;

  /* Typography */
  --font-mono:   'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display:'VT323', 'Share Tech Mono', monospace;

  /* Font sizes */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   16px;
  --fs-hero: clamp(42px, 8.5vw, 84px);
  --fs-big:  clamp(28px, 5.5vw, 52px);
  --fs-h2:   32px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;

  /* Touch targets */
  --touch-min: 48px;

  /* Z-index scale */
  --z-content:    10;
  --z-sticky:     50;
  --z-fiktif-bar: 60;
  --z-themebtn:   80;
  --z-modal:      200;
  --z-halftone:   9994;
  --z-crt-flicker:9996;
  --z-crt-vig:    9997;
  --z-crt-scan:   9998;
  --z-boot:       9999;

  /* Transitions */
  --t-fast:   150ms ease-out;
  --t-normal: 250ms ease-out;
  --t-slow:   400ms ease-out;

  /* Layout */
  --max-width: 1180px;
  --wrap-pad:  22px;

  /* Letter spacing */
  --ls-tight: 0.5px;
  --ls-base:  1px;
  --ls-wide:  2px;
  --ls-xwide: 3px;
  --ls-ultra: 5px;
}

/* ── TEMA NEON HIJAU ── */
body.green {
  --bg:              #34dd00;
  --screen:          #041206;
  --panel:           rgba(0, 0, 0, 0.06);

  --ink:             #08150a;
  --ink-dim:         rgba(6, 18, 7, 0.72);
  --ink-faint:       rgba(6, 18, 7, 0.45);
  --ink-bright:      #000000;

  --line:            rgba(0, 30, 0, 0.5);
  --line-bright:     rgba(0, 50, 0, 0.7);

  --accent:          #08150a;
  --accent-hover:    #1a3020;

  --locked:          rgba(6, 18, 7, 0.35);

  --glow:            none;
  --glow-lg:         none;
  --glow-sm:         none;

  --crt-flicker-color:   rgba(0, 20, 0, 0.02);
  --crt-scan-opacity:    0.3;
  --crt-vig-end:         rgba(0, 0, 0, 0.28);
  --halftone-opacity:    0.4;
}

/* ── REDUCED MOTION: disable animation tokens ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:   0ms;
    --t-normal: 0ms;
    --t-slow:   0ms;
  }
}