/* ===========================================================================
   AuditMon - token desain
   Arah desain "Buku Kas": meminjam STRUKTUR slip gaji cetak (kolom bergaris,
   angka rata kanan, garis tunggal di atas subtotal, garis ganda di atas
   take-home pay) tanpa meniru teksturnya - tanpa kertas krem, tanpa sudut siku
   yang kaku.

   Palet kategori diambil dari warna denominasi rupiah: merah muda 100rb, biru
   50rb, hijau 20rb, ungu 10rb, coklat 5rb, toska 1rb. Warna yang sudah dibaca
   pemakainya setiap hari.

   Seluruh warna didefinisikan di :root. Blok gelap HANYA menimpa nilainya, dan
   ditulis dua kali: satu untuk preferensi sistem, satu untuk pilihan eksplisit
   pengguna, sehingga tombol tema menang di kedua arah.
   =========================================================================== */

:root {
  color-scheme: light;

  /* --- Permukaan --- */
  --bg:            #EDF1F5;   /* kertas dingin, bukan putih dan bukan krem */
  --surface:       #FFFFFF;
  --surface-2:     #F4F7FA;
  --surface-3:     #E8EDF3;
  --border:        #DCE3EB;
  --border-strong: #B9C5D2;
  --overlay:       rgba(12, 20, 28, 0.62);

  /* --- Teks --- */
  --text:        #101C28;     /* tinta petrol, bukan hitam murni */
  --text-muted:  #566779;
  --text-faint:  #8195A8;
  --text-invert: #FFFFFF;

  /* --- Merek --- */
  --primary:       #2A3F73;   /* nila tua, sengaja jauh dari biru bawaan */
  --primary-hover: #1F3059;
  --primary-soft:  #E7ECF7;
  --primary-ring:  #7C95CE;

  /* --- Semantik uang --- */
  --income:       #147A55;
  --income-soft:  #E2F3EC;
  --expense:      #BF3B2E;
  --expense-soft: #FBE9E7;
  --warning:      #A96700;
  --warning-soft: #FBF0DC;
  --danger:       #A82A1F;
  --danger-soft:  #FBE9E7;
  --saving:       #5B4A9E;
  --saving-soft:  #ECE8F8;

  /* --- Palet kategori: denominasi rupiah --- */
  --cat-1: #D9526E;  /* Rp100.000 merah muda */
  --cat-2: #2D6FB4;  /* Rp50.000  biru       */
  --cat-3: #2E9E6B;  /* Rp20.000  hijau      */
  --cat-4: #7B5EA7;  /* Rp10.000  ungu       */
  --cat-5: #A9713F;  /* Rp5.000   coklat     */
  --cat-6: #2C979A;  /* Rp1.000   toska      */
  --cat-7: #C8952E;  /* emas                 */
  --cat-8: #7D8794;  /* Rp2.000   abu        */

  /* --- Huruf --- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-display: 2.25rem;
  --fs-kpi:     1.75rem;
  --fs-h1:      1.5rem;
  --fs-h2:      1.1875rem;
  --fs-h3:      1rem;
  --fs-body:    0.9375rem;
  --fs-sm:      0.8125rem;
  --fs-xs:      0.6875rem;

  --lh-tight: 1.15;
  --lh-body:  1.55;
  --track-eyebrow: 0.09em;
  --track-display: -0.02em;

  /* --- Ruang: kelipatan 4 --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-18: 72px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  --shadow-1:   0 1px 2px rgba(16, 28, 40, 0.06), 0 1px 1px rgba(16, 28, 40, 0.04);
  --shadow-2:   0 6px 20px -6px rgba(16, 28, 40, 0.16), 0 2px 6px -2px rgba(16, 28, 40, 0.08);
  --shadow-pop: 0 18px 48px -12px rgba(16, 28, 40, 0.32);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --sidebar-w: 232px;
  --sidebar-w-rail: 68px;
  --topbar-h: 60px;
  --bottomnav-h: 60px;
}

/* Nilai gelap ditulis sekali sebagai custom property lalu dipakai dua kali di
   bawah, supaya definisi terang dan gelap tidak pernah bergeser satu sama lain. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg:            #0E151C;   /* hitam petrol, bukan hitam murni */
    --surface:       #17212B;
    --surface-2:     #1E2A36;
    --surface-3:     #26343F;
    --border:        #2A3947;
    --border-strong: #3E5060;
    --overlay:       rgba(0, 0, 0, 0.72);

    --text:        #E6EDF4;
    --text-muted:  #9BAEC0;
    --text-faint:  #6E8296;
    --text-invert: #0E151C;

    --primary:       #7D9AD9;
    --primary-hover: #98B0E4;
    --primary-soft:  #1C2A44;
    --primary-ring:  #5C7CC0;

    --income:       #3FBF87;  --income-soft:  #10322A;
    --expense:      #F0736A;  --expense-soft: #3A1F1E;
    --warning:      #E0A33A;  --warning-soft: #37290F;
    --danger:       #F0736A;  --danger-soft:  #3A1F1E;
    --saving:       #A392E0;  --saving-soft:  #241F3D;

    --cat-1: #E8768C; --cat-2: #5C97D4; --cat-3: #4FBE8B; --cat-4: #A186C9;
    --cat-5: #C79366; --cat-6: #4FBABD; --cat-7: #DDB159; --cat-8: #9AA5B2;

    /* Bayangan praktis tak terlihat di latar gelap; beban pemisahan dipindah
       ke garis tepi supaya kartu tetap punya batas yang jelas. */
    --shadow-1:   none;
    --shadow-2:   0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-pop: 0 24px 56px -16px rgba(0, 0, 0, 0.75);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:            #0E151C;
  --surface:       #17212B;
  --surface-2:     #1E2A36;
  --surface-3:     #26343F;
  --border:        #2A3947;
  --border-strong: #3E5060;
  --overlay:       rgba(0, 0, 0, 0.72);

  --text:        #E6EDF4;
  --text-muted:  #9BAEC0;
  --text-faint:  #6E8296;
  --text-invert: #0E151C;

  --primary:       #7D9AD9;
  --primary-hover: #98B0E4;
  --primary-soft:  #1C2A44;
  --primary-ring:  #5C7CC0;

  --income:       #3FBF87;  --income-soft:  #10322A;
  --expense:      #F0736A;  --expense-soft: #3A1F1E;
  --warning:      #E0A33A;  --warning-soft: #37290F;
  --danger:       #F0736A;  --danger-soft:  #3A1F1E;
  --saving:       #A392E0;  --saving-soft:  #241F3D;

  --cat-1: #E8768C; --cat-2: #5C97D4; --cat-3: #4FBE8B; --cat-4: #A186C9;
  --cat-5: #C79366; --cat-6: #4FBABD; --cat-7: #DDB159; --cat-8: #9AA5B2;

  --shadow-1:   none;
  --shadow-2:   0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 24px 56px -16px rgba(0, 0, 0, 0.75);
}