/*
 * ============================================================
 * esdm-tokens.css — GeoRIMA Design System Tokens
 * Sumber: app/handoff/DESIGN_SYSTEM.md (ESDM Pedoman Identitas Visual 2025)
 * ============================================================
 * Load file ini PERTAMA sebelum semua CSS lain di setiap halaman.
 * Semua nilai warna, z-index, shadow, radius, dan animasi
 * harus menggunakan CSS var() dari file ini — JANGAN hardcode.
 * ============================================================
 */

:root {

  /* ── Brand Colors ESDM ──────────────────────────────────────
   * Ref: Pedoman Identitas Visual ESDM 2025
   * ─────────────────────────────────────────────────────────── */
  --color-brand-yellow:         #FFF500;  /* Header, badge versi — JANGAN untuk teks */
  --color-brand-navy:           #233C5A;  /* dark-blue: sidebar, teks tombol di atas putih */
  --color-gold-nusantara:       #D5B600;  /* teks brand di atas latar putih — web-safe, AMAN */
  --color-black-mineral:        #000000;  /* teks di atas brand-yellow */
  --color-grey-inovation:       #E1E6EB;  /* tombol aksi utama admin, gradient panel info */
  --color-green-sustainability: #00B473;  /* elemen sustainability */

  /* ── Warna Komoditas Peta ───────────────────────────────────
   * Canonical: assets/v3/georimav3.js (potensiData)
   * ─────────────────────────────────────────────────────────── */
  --color-mineral-logam:        #C0392B;  /* header popup Mineral Logam */
  --color-mineral-bukan-logam:  #0F766E;  /* header popup Mineral Bukan Logam */
  --color-batubara:             #78350F;  /* header popup Batubara */
  --color-panas-bumi:           #7C3AED;  /* header popup Panas Bumi */
  --color-gambut:               #15803D;  /* header popup Gambut */
  --color-bitumen-aspal:        #374151;  /* header popup Bitumen Aspal */
  --color-gas-metana:           #0369A1;  /* header popup Gas Metana Batubara */

  /* ── Warna Semantik Sistem ──────────────────────────────────*/
  --color-success:  #22C55E;  /* Green 500 — status aktif, simpan berhasil */
  --color-warning:  #F59E0B;  /* Amber 500 — peringatan, skor kualitas rendah */
  --color-error:    #EF4444;  /* Red 500 — error, badge kritis */
  --color-info:     #3B82F6;  /* Blue 500 — link, tombol info */

  /* ── Klasifikasi Data SDI ────────────────────────────────── */
  --color-data-open:       #3B82F6;  /* Terbuka — data publik */
  --color-data-restricted: #F59E0B;  /* Terbatas — butuh login */
  --color-data-closed:     #EF4444;  /* Tertutup — rahasia negara */

  /* ── Neutral Scale (Slate) ──────────────────────────────────*/
  --color-text-heading:   #0F172A;  /* Slate 900 — heading di panel putih */
  --color-text-body:      #334155;  /* Slate 700 — body teks normal */
  --color-text-secondary: #64748B;  /* Slate 500 — label kecil, teks sekunder */
  --color-text-disabled:  #94A3B8;  /* Slate 400 — placeholder, disabled */
  --color-border:         #E2E8F0;  /* Slate 200 — border kartu, divider */
  --color-surface-alt:    #F1F5F9;  /* Slate 100 — background kartu alternatif */
  --color-surface:        #FFFFFF;

  /* ── Z-Index Tokens ─────────────────────────────────────────
   * WAJIB gunakan var() — JANGAN hardcode angka z-index!
   * ─────────────────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;   /* Leaflet container, tooltip permanent */
  --z-raised:   10;   /* layer kustom (SHP, WMS) */
  --z-dropdown: 100;  /* dropdown pencarian wilayah */
  --z-sticky:   200;  /* panel slide-in, sidebar profil */
  --z-overlay:  1100; /* backdrop modal rgba(0,0,0,0.45) — di atas Leaflet controls (1000) */
  --z-modal:    1200; /* TentangModal, PolygonModal */
  --z-toast:    1300; /* toast notifikasi — wajib di atas modal */

  /* ── Elevation / Box Shadow ─────────────────────────────────*/
  --shadow-floating: 0 4px 16px rgba(15,23,42,0.08);
  --shadow-card:     0 10px 40px rgba(15,23,42,0.1);
  --shadow-modal:    0 18px 50px rgba(15,23,42,0.22);
  --shadow-btn:      0 4px 16px rgba(37,99,235,0.3);

  /* ── Animation Tokens ───────────────────────────────────────
   * Hard limit: 300ms. Di atas ini terasa lambat di perangkat rendah.
   * ─────────────────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-modal:  250ms;  /* max yang boleh untuk modal/panel */
  --easing-enter:    ease-out;
  --easing-exit:     ease-in;
  --easing-spring:   cubic-bezier(0.34, 1.4, 0.64, 1); /* modal card scale */

  /* ── Border Radius ──────────────────────────────────────────*/
  --radius-xs:   4px;   /* badge, chip kecil */
  --radius-sm:   6px;   /* tombol kecil, input */
  --radius-md:   10px;  /* kartu panel, dropdown */
  --radius-lg:   16px;  /* modal, floating panel utama */
  --radius-pill: 9999px; /* avatar, dot indikator */
}

/* ── Global Focus-Visible Ring ──────────────────────────────────
 * WCAG 2.1 AA — wajib terlihat di semua background
 * ─────────────────────────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: inherit;
}

/* Untuk elemen di atas latar gelap (peta, overlay) */
.dark-context *:focus-visible {
  outline-color: #93C5FD; /* Blue 300 — kontras tinggi di latar gelap */
}

/* ── Prefers Reduced Motion ─────────────────────────────────────
 * Hormati preferensi aksesibilitas pengguna.
 * ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Lucide Icon Utilities ──────────────────────────────────────
 * Helper classes untuk Lucide Icons (pengganti Font Awesome)
 * ─────────────────────────────────────────────────────────────── */

/* Default Lucide size — override per-konteks */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Spinner animation (pengganti fa-spin) */
.lucide-spin {
  animation: lucide-rotate 0.8s linear infinite;
}

@keyframes lucide-rotate {
  to { transform: rotate(360deg); }
}

/* Size variants */
.lucide-xs  { width: 12px; height: 12px; }
.lucide-sm  { width: 14px; height: 14px; }
.lucide-md  { width: 16px; height: 16px; }
.lucide-lg  { width: 18px; height: 18px; }
.lucide-xl  { width: 20px; height: 20px; }
.lucide-2xl { width: 24px; height: 24px; } /* default Lucide */
.lucide-3xl { width: 32px; height: 32px; }
.lucide-4xl { width: 48px; height: 48px; } /* empty state icons */

/* Color utilities untuk Lucide stroke */
.stroke-muted   { color: var(--color-text-disabled); }
.stroke-body    { color: var(--color-text-body); }
.stroke-brand   { color: var(--color-brand-navy); }
.stroke-success { color: var(--color-success); }
.stroke-warning { color: var(--color-warning); }
.stroke-error   { color: var(--color-error); }
.stroke-info    { color: var(--color-info); }