/* Neraca — token desain, diturunkan dari logo resmi PT KAI (navy #2D2A70 + oranye #ED6B23).
   Sumber kebenaran: docs/03-DESIGN-SYSTEM.md
   Nama "Neraca": ledger yang menyeimbangkan tiga sisi — KAI, Mitra, Settlement.

   Beda sikap dari "Rel" (lrt-app): di sana merah brand = merah status, jadi tombol
   TERPAKSA netral grafit. Di sini navy brand TIDAK bentrok dengan warna status manapun
   (ok=hijau, warn=ambar, risk=merah, progress=slate), sehingga navy boleh dipakai
   sebagai warna aksi sungguhan. Oranye logo dicadangkan ketat: hanya untuk penanda
   channel aktif, satu sorotan angka per layar, dan toggle aktif — tidak pernah untuk
   tombol massal atau status data. */

:root {
  color-scheme: light;

  /* netral — dingin sedikit kebiruan, selaras dengan navy brand */
  --canvas:      #F5F6F9;
  --surface:     #FFFFFF;
  --surface-2:   #FAFBFD;
  --surface-3:   #EEF0F5;
  --line:        #E3E6EC;
  --line-strong: #CDD2DC;
  --ink-900:     #12131A;
  --ink-700:     #30333D;
  --ink-500:     #666B78;
  --ink-400:     #8B909C;

  /* brand navy — aksi & identitas sekaligus (lihat catatan di atas) */
  --brand-050: #F1F0FA;
  --brand-100: #E4E3F5;
  --brand-200: #C7C5EA;
  --brand-500: #4B47B5;
  --brand-600: #3B3894;
  --brand-700: #2D2A70;   /* nilai persis logo */
  --brand-800: #1E1D57;
  --brand-900: #14133A;

  /* navy tetap (TIDAK dibalik di mode gelap) — khusus latar panel/tile solid
     (splash, gerbang loading) yang menaruh logo/teks putih di atasnya. --brand-900
     dipakai sebagai warna INK di mode gelap (jadi hampir putih), sehingga tidak
     boleh dipakai untuk latar solid; --brand-navy selalu navy di kedua tema. */
  --brand-navy: #14133A;

  --action:      var(--brand-700);
  --action-h:    var(--brand-800);
  --focus:       var(--brand-600);

  /* accent oranye — sorotan, dipakai sangat hemat (lihat §3.0 design system) */
  --accent-100: #FCE4D6;
  --accent-500: #ED6B23;  /* nilai persis logo */
  --accent-700: #A6420C;  /* aman untuk teks di atas putih, 6.2:1 */

  /* status — hanya untuk status data, selalu berlabel teks */
  --st-neutral:    #666B78;  --st-neutral-bg:  #EEF0F5;
  --st-progress:   #45688C;  --st-progress-bg: #EAF0F6;
  --st-ok:         #157A4F;  --st-ok-bg:       #E7F5EE;
  --st-risk:       #C22A2A;  --st-risk-bg:     #FBEAEA;
  --st-warn:       #8A6410;  --st-warn-bg:     #F7F1E0;
  --st-done:       #52565F;  --st-done-bg:     #EEEFF2;

  /* mark grafik untuk status (>= 3:1 thd permukaan) */
  --mk-good: #1E9463; --mk-warning: #A87A14;
  --mk-serious: #C2712F; --mk-critical: #C22A2A; --mk-neutral: #8B909C;

  /* kategori 4 channel — urutan tetap, warna mengikuti entitas bukan peringkat.
     Divalidasi dengan scripts/validate_palette.js (skill dataviz): PASS penuh
     adjacent light & dark. Untuk grafik all-pairs (scatter/radar) 4 warna tidak
     pernah lolos all-pairs sekaligus — dipecah jadi small multiples di sana. */
  --ch-pg:    #2a78d6;  /* Payment Gateway — biru */
  --ch-b2b:   #1baf7a;  /* B2B / OTA — aqua */
  --ch-addon: #4a3aa7;  /* Add On — violet */
  --ch-edc:   #e87ba4;  /* EDC Loket — magenta */

  /* ramp sekuensial — biru-violet navy, satu hue, terang -> gelap */
  --seq-100:#EEF0FA; --seq-200:#DBDFF3; --seq-300:#B9C0E8;
  --seq-400:#939DD9; --seq-500:#6E79C8; --seq-600:#4F59AC;
  --seq-700:#3D4488; --seq-800:#2C3166; --seq-900:#1D2047;

  /* tipografi */
  --font-ui:   'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --r-chip:4px; --r-input:5px; --r-card:6px; --r-modal:10px;

  /* bayangan — selalu netral, tidak pernah berwarna */
  --shadow-1: 0 1px 2px rgba(18,19,26,.06);
  --shadow-2: 0 4px 12px rgba(18,19,26,.09), 0 1px 2px rgba(18,19,26,.05);
  --shadow-3: 0 16px 40px rgba(18,19,26,.14);

  --ease: cubic-bezier(.2,0,0,1);
  --dur-1: 90ms; --dur-2: 140ms; --dur-3: 160ms;

  --row-h: 36px;
  --card-pad: var(--sp-4);
  --rail-w: 64px;
  --side-w: 240px;
}

/* ── mode gelap: langkah yang dipilih dari ramp yang sama, bukan pembalikan ── */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { color-scheme: dark; }
  :root:where(:not([data-theme="light"])) {
    --canvas:#0E0F14; --surface:#171922; --surface-2:#1D2029; --surface-3:#262A36;
    --line:#2B2F3B; --line-strong:#3A3F4E;
    --ink-900:#EEF0F5; --ink-700:#C9CCD6; --ink-500:#969AA8; --ink-400:#767A88;

    --brand-050:#1A1B3A; --brand-100:#232449; --brand-200:#3A3D74;
    --brand-500:#8E96E8; --brand-600:#9BA3EE; --brand-700:#B6BCF2; --brand-800:#D3D6F7; --brand-900:#EEEFFB;
    --action:#9BA3EE; --action-h:#B6BCF2; --focus:#9BA3EE;

    --accent-100:#3A2415; --accent-500:#F2854B; --accent-700:#FFA36B;

    --st-neutral:#9AA0AE; --st-neutral-bg:#242732;
    --st-progress:#7FA6CC; --st-progress-bg:#182430;
    --st-ok:#3FB37C;       --st-ok-bg:#12271D;
    --st-risk:#E9615C;     --st-risk-bg:#2E1616;
    --st-warn:#D9A62A;     --st-warn-bg:#2A2210;
    --st-done:#9199A6;     --st-done-bg:#22242C;

    --mk-good:#3FB37C; --mk-warning:#D9A62A; --mk-serious:#DE8A47; --mk-critical:#E9615C; --mk-neutral:#8B909C;

    --ch-pg:#3987e5; --ch-b2b:#199e70; --ch-addon:#9085e9; --ch-edc:#d55181;

    --seq-100:#1A2440; --seq-200:#212B54; --seq-300:#2B376E;
    --seq-400:#37458A; --seq-500:#4753A6; --seq-600:#5E6AC0; --seq-700:#8189D4; --seq-800:#A6ACE3; --seq-900:#CDD0F0;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 4px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.34);
    --shadow-3: 0 20px 48px rgba(0,0,0,.6);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas:#0E0F14; --surface:#171922; --surface-2:#1D2029; --surface-3:#262A36;
  --line:#2B2F3B; --line-strong:#3A3F4E;
  --ink-900:#EEF0F5; --ink-700:#C9CCD6; --ink-500:#969AA8; --ink-400:#767A88;

  --brand-050:#1A1B3A; --brand-100:#232449; --brand-200:#3A3D74;
  --brand-500:#8E96E8; --brand-600:#9BA3EE; --brand-700:#B6BCF2; --brand-800:#D3D6F7; --brand-900:#EEEFFB;
  --action:#9BA3EE; --action-h:#B6BCF2; --focus:#9BA3EE;

  --accent-100:#3A2415; --accent-500:#F2854B; --accent-700:#FFA36B;

  --st-neutral:#9AA0AE; --st-neutral-bg:#242732;
  --st-progress:#7FA6CC; --st-progress-bg:#182430;
  --st-ok:#3FB37C;       --st-ok-bg:#12271D;
  --st-risk:#E9615C;     --st-risk-bg:#2E1616;
  --st-warn:#D9A62A;     --st-warn-bg:#2A2210;
  --st-done:#9199A6;     --st-done-bg:#22242C;

  --mk-good:#3FB37C; --mk-warning:#D9A62A; --mk-serious:#DE8A47; --mk-critical:#E9615C; --mk-neutral:#8B909C;

  --ch-pg:#3987e5; --ch-b2b:#199e70; --ch-addon:#9085e9; --ch-edc:#d55181;

  --seq-100:#1A2440; --seq-200:#212B54; --seq-300:#2B376E;
  --seq-400:#37458A; --seq-500:#4753A6; --seq-600:#5E6AC0; --seq-700:#8189D4; --seq-800:#A6ACE3; --seq-900:#CDD0F0;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.34);
  --shadow-3: 0 20px 48px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}