/* Rel — token desain, diturunkan dari logo LRT Jabodebek (merah + hitam).
   Sumber kebenaran: docs/03-DESIGN-SYSTEM.md
   Disalin apa adanya ke frontend/styles/tokens.css. */

:root {
  color-scheme: light;

  /* netral grafit hangat — condong hangat karena aksen brand merah */
  --canvas:      #F7F6F5;
  --surface:     #FFFFFF;
  --surface-2:   #FBFAF9;
  --surface-3:   #F1EFEE;
  --line:        #E6E3E1;
  --line-strong: #D3CFCC;
  --ink-900:     #14100F;
  --ink-700:     #35302E;
  --ink-500:     #6B6360;
  --ink-400:     #8E8582;

  /* aksi & chrome — grafit, BUKAN merah (merah dicadangkan untuk perhatian) */
  --action:      #1B1614;
  --action-h:    #322B28;

  /* cincin fokus — biru slate. Sengaja bukan merah (itu warna error,
     dan field yang sedang aktif tidak boleh terlihat seperti salah)
     dan bukan hitam (tidak terlihat di atas tombol utama). */
  --focus:       #4E7398;

  /* merah brand — identitas logo sekaligus warna perhatian */
  --brand-050: #FDEDED;
  --brand-100: #F8D6D7;
  --brand-500: #D8232A;
  --brand-600: #BE1A22;
  --brand-700: #9E141B;

  /* status — hanya untuk status data, selalu berlabel teks */
  --st-neutral:    #6B6360;  --st-neutral-bg:  #F1EFEE;
  --st-progress:   #4E7398;  --st-progress-bg: #EDF1F5;
  --st-ok:         #1D6F4A;  --st-ok-bg:       #E9F3ED;
  --st-risk:       #BE1A22;  --st-risk-bg:     #FDEDED;
  --st-warn:       #8A6410;  --st-warn-bg:     #F7F1E2;
  --st-done:       #4A4340;  --st-done-bg:     #EFEDEC;

  /* mark grafik untuk status (>= 3:1 thd permukaan) */
  --mk-good: #268A5B; --mk-warning: #B07D12;
  --mk-serious: #C2712F; --mk-critical: #C8262C; --mk-neutral: #8E8582;

  /* kategori bank — urutan tetap, mengikuti entitas, condong dingin
     supaya tidak pernah tertukar dengan merah/ambar status */
  --bank-1: #2E6DB4;  /* Mandiri */
  --bank-2: #1F8F6E;  /* BRI */
  --bank-3: #7A5AA8;  /* BNI */
  --bank-4: #A8791B;  /* BCA */
  --bank-5: #B04A78;  /* Bank DKI */

  /* ramp sekuensial — slate-biru, satu hue, terang -> gelap.
     Sengaja dingin: besaran normal tidak boleh terlihat mengkhawatirkan. */
  --seq-100:#EDF1F5; --seq-200:#D5DFE9; --seq-300:#B5C8DA;
  --seq-400:#8FACC8; --seq-500:#6A8FB3; --seq-600:#4E7398;
  --seq-700:#3C5A79; --seq-800:#2C445C; --seq-900:#1E3040;

  /* 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:8px;

  /* bayangan — selalu netral, tidak pernah berwarna */
  --shadow-1: 0 1px 2px rgba(20,16,15,.05);
  --shadow-2: 0 4px 12px rgba(20,16,15,.08), 0 1px 2px rgba(20,16,15,.04);
  --shadow-3: 0 12px 32px rgba(20,16,15,.12);

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

  --row-h: 34px;
  --card-pad: var(--sp-4);
}

/* ── 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:#110F0E; --surface:#1A1615; --surface-2:#211C1B; --surface-3:#2A2422;
    --line:#2C2725; --line-strong:#3B3532;
    --ink-900:#F5F2F1; --ink-700:#D8D3D1; --ink-500:#A09895; --ink-400:#847B78;
    --action:#F5F2F1; --action-h:#DCD6D4;
  --focus:#7BA3C6;
    --brand-050:#2B1414; --brand-100:#3D1A1B;
    --brand-500:#F0524E; --brand-600:#E5433F; --brand-700:#C8302E;
    --st-neutral:#A09895; --st-neutral-bg:#2A2422;
    --st-progress:#7BA3C6; --st-progress-bg:#182430;
    --st-ok:#3FB37C;       --st-ok-bg:#132A20;
    --st-risk:#F0524E;     --st-risk-bg:#2B1414;
    --st-warn:#D9A62A;     --st-warn-bg:#2A2210;
    --st-done:#948B88;     --st-done-bg:#242020;
    --mk-good:#3FB37C; --mk-warning:#D9A62A;
    --mk-serious:#DE8A47; --mk-critical:#F0524E; --mk-neutral:#948B88;
    --bank-1:#4A8ED2; --bank-2:#2FA985; --bank-3:#9B84C9; --bank-4:#AC861F; --bank-5:#CC6D9A;
    --seq-100:#1A2430; --seq-200:#20303F; --seq-300:#2A3F53;
    --seq-400:#345067; --seq-500:#42647F; --seq-600:#527A99;
    --seq-700:#6C93AF; --seq-800:#8FAFC6; --seq-900:#B4CADC;
    --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 12px 32px rgba(0,0,0,.6);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas:#110F0E; --surface:#1A1615; --surface-2:#211C1B; --surface-3:#2A2422;
  --line:#2C2725; --line-strong:#3B3532;
  --ink-900:#F5F2F1; --ink-700:#D8D3D1; --ink-500:#A09895; --ink-400:#847B78;
  --action:#F5F2F1; --action-h:#DCD6D4;
  --focus:#7BA3C6;
  --brand-050:#2B1414; --brand-100:#3D1A1B;
  --brand-500:#F0524E; --brand-600:#E5433F; --brand-700:#C8302E;
  --st-neutral:#A09895; --st-neutral-bg:#2A2422;
  --st-progress:#7BA3C6; --st-progress-bg:#182430;
  --st-ok:#3FB37C;       --st-ok-bg:#132A20;
  --st-risk:#F0524E;     --st-risk-bg:#2B1414;
  --st-warn:#D9A62A;     --st-warn-bg:#2A2210;
  --st-done:#948B88;     --st-done-bg:#242020;
  --mk-good:#3FB37C; --mk-warning:#D9A62A;
  --mk-serious:#DE8A47; --mk-critical:#F0524E; --mk-neutral:#948B88;
  --bank-1:#4A8ED2; --bank-2:#2FA985; --bank-3:#9B84C9; --bank-4:#AC861F; --bank-5:#CC6D9A;
  --seq-100:#1A2430; --seq-200:#20303F; --seq-300:#2A3F53;
  --seq-400:#345067; --seq-500:#42647F; --seq-600:#527A99;
  --seq-700:#6C93AF; --seq-800:#8FAFC6; --seq-900:#B4CADC;
  --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 12px 32px rgba(0,0,0,.6);
}

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