/* BERKAS INI DIHASILKAN OTOMATIS — JANGAN DISUNTING.
 *
 * Sumbernya: design/tokens.css
 * Disebarkan oleh: design/sync.sh (dipanggil prebuild & predev)
 *
 * Suntingan di sini akan HILANG pada build berikutnya tanpa peringatan apa pun.
 * Ubah warna PayQris di design/tokens.css. */

/* ============================================================================
 * PayQris — SUMBER TOKEN TUNGGAL
 *
 * Berkas ini satu-satunya tempat warna PayQris didefinisikan. Sebelum ini
 * paletnya ditulis ULANG di tiga tempat (web/tailwind.config.ts,
 * admin/tailwind.config.ts, dan :root di landing-static/index.html) dengan
 * komentar yang meminta orang menyamakan ketiganya secara manual. Itu bertahan
 * selama warnanya tidak pernah berubah; begitu ada dua tema, menyamakan enam
 * himpunan nilai dengan tangan pasti gagal.
 *
 * Ketiga aplikasi menautnya lewat SYMLINK ke berkas ini, bukan salinan — jadi
 * tidak ada langkah "jangan lupa sinkronkan" yang bisa terlewat.
 *
 * ---------------------------------------------------------------------------
 * KENAPA NILAINYA "246 248 248" DAN BUKAN "#f6f8f8"
 *
 * Ini bukan gaya penulisan, ini keharusan. Markup PayQris memakai modifier
 * opasitas Tailwind di 101 tempat (`text-ink/55`, `text-ink/65`, `bg-mint/10`).
 * Tailwind v3 menyisipkan alpha dengan menulis `rgb(<nilai> / 0.55)`, jadi
 * tokennya HARUS berupa tiga kanal mentah. Kalau diisi hex, seluruh 101 tempat
 * itu menghasilkan CSS tidak sah dan teksnya kehilangan warna sama sekali.
 *
 * Akibatnya: di CSS biasa, token dipakai sebagai `rgb(var(--ink))`, bukan
 * `var(--ink)`.
 *
 * ---------------------------------------------------------------------------
 * DUA TEMA, SATU SISTEM HURUF
 *
 * Tema hanya mengganti WARNA. Huruf, ukuran, jarak, dan radius sama di
 * keduanya: kalau huruf ikut bertukar, menekan tombol tema akan terasa seperti
 * berpindah aplikasi, bukan menyesuaikan terang-gelap.
 *
 * Terang diturunkan dari arah "B · Terang & Tegas", gelap dari "C · Konsol
 * Gelap" (kanvas arah desain, 8 Okt 2026).
 *
 * ---------------------------------------------------------------------------
 * CARA TEMA DIPILIH — urutannya penting
 *
 * 1. `:root`                              → terang (bawaan, juga saat CSS gagal)
 * 2. `@media (prefers-color-scheme: dark)` → ikut sistem, HANYA kalau
 *    `data-theme` belum disetel sama sekali
 * 3. `[data-theme="terang"|"gelap"]`      → pilihan eksplisit user, menang
 *    atas setelan sistem
 *
 * Penjaga `:root:not([data-theme])` di aturan media itu WAJIB. Tanpa itu,
 * seseorang yang perangkatnya gelap tapi sengaja memilih tema TERANG akan
 * tetap mendapat gelap, karena aturan media muncul belakangan dan
 * kekhususannya sama.
 *
 * ---------------------------------------------------------------------------
 * KONTRAS
 *
 * Setiap pasangan teks/latar diperiksa ke rasio 4.5:1 (AA teks kecil). Dua
 * yang paling mudah salah, dan sudah benar di sini:
 *   - teks di atas isian aksen. Di tema TERANG aksennya gelap sehingga
 *     tulisannya putih; di tema GELAP aksennya terang sehingga tulisannya
 *     GELAP (--accent-ink). Membalik salah satunya menghasilkan tulisan
 *     berkontras ~1.8:1 yang praktis tidak terbaca.
 *   - warna status. Lunas/menunggu/kedaluwarsa dibedakan juga oleh
 *     TERANG-GELAPnya, bukan cuma hue, supaya tetap terpisah bagi mata yang
 *     sulit membedakan merah-hijau.
 *
 * KONTRAS BUKAN "SEMAKIN TINGGI SEMAKIN BAIK" (revisi 8 Okt 2026). Tema gelap
 * versi pertama memakai latar nyaris hitam (12 20 19), teks nyaris putih
 * (232 239 237), dan aksen sangat jenuh (94 234 212). Ketiganya lolos 4.5:1
 * dengan sangat longgar -- dan justru itu masalahnya: Owner melaporkannya
 * menyilaukan, dan penilaian itu benar. Rasio sangat tinggi di layar gelap
 * memaksa mata menyesuaikan terus-menerus, terutama pada bidang aksen yang
 * luas. Sekarang latarnya diangkat (17 26 25), teksnya diturunkan
 * (221 230 227), dan aksennya diredam (77 201 178). Semuanya MASIH lolos AA;
 * yang dibuang cuma kelebihannya.
 *
 * Jadi jangan "perbaiki" angka-angka ini kembali ke yang lebih ekstrem dengan
 * alasan aksesibilitas -- batas bawahnya 4.5:1, bukan setinggi mungkin.
 * ==========================================================================*/

:root {
  /* ── Bidang ────────────────────────────────────────────────────────────── */
  --bg: 246 248 248;            /* #f6f8f8 latar halaman */
  --surface: 255 255 255;       /* #ffffff kartu, panel, baris tabel */
  --surface-2: 250 251 251;     /* #fafbfb kepala tabel, bidang tenggelam */
  --surface-3: 237 241 240;     /* #edf1f0 jalur batang, isian netral */

  /* ── Teks ─────────────────────────────────────────────────────────────── */
  --ink: 12 20 22;              /* #0c1416 teks utama */
  --ink-soft: 59 74 71;         /* #3b4a47 teks sekunder */
  --ink-muted: 100 116 114;     /* #647472 keterangan — 4.7:1 di --surface */

  /* ── Garis ────────────────────────────────────────────────────────────── */
  --line: 228 232 231;          /* #e4e8e7 batas kartu & panel */
  --line-soft: 240 243 242;     /* #f0f3f2 pemisah baris tabel */

  /* ── Aksen ────────────────────────────────────────────────────────────── */
  --accent: 11 110 96;          /* #0b6e60 — 5.9:1 di --surface */
  --accent-strong: 7 81 70;     /* #075146 hover */
  --accent-ink: 255 255 255;    /* teks DI ATAS --accent */
  --accent-soft: 232 242 239;   /* #e8f2ef isian aksen lembut */

  /* ── Kolom isian ──────────────────────────────────────────────────────── */
  --field-bg: 246 248 248;      /* #f6f8f8 */
  --field-line: 220 226 225;    /* #dce2e1 */
  --field-bg-disabled: 237 241 240;

  /* ── Status ───────────────────────────────────────────────────────────── */
  --ok-bg: 227 240 236;         /* #e3f0ec */
  --ok-ink: 7 81 70;            /* #075146 */
  --warn-bg: 250 235 209;       /* #faebd1 */
  --warn-ink: 107 74 14;        /* #6b4a0e */
  --danger-bg: 255 241 238;     /* #fff1ee */
  --danger-ink: 164 63 44;      /* #a43f2c */
  --danger-line: 240 200 190;   /* #f0c8be */
  --neutral-bg: 237 241 240;    /* #edf1f0 */
  --neutral-ink: 68 82 79;      /* #44524f */

  /* ── Grafik batang rasio ──────────────────────────────────────────────── */
  --bar-ok: 11 110 96;
  --bar-mid: 201 211 209;       /* #c9d3d1 */
  --bar-low: 232 236 235;       /* #e8eceb */

  /* ── Bentuk & kedalaman ───────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 11px;
  --r-xl: 14px;
  --shadow-panel: 0 1px 2px rgb(12 20 22 / 0.04);
  --shadow-pop: 0 12px 32px rgb(12 20 22 / 0.12);

  /* ── Huruf ────────────────────────────────────────────────────────────── */
  /* Nilainya diisi next/font di kedua app Next (var(--font-*) dari layout);
   * fallback di sini dipakai landing-static yang tidak punya langkah build,
   * dan menjaga halaman tetap benar kalau font gagal dimuat. */
  --font-sans: var(--font-jakarta, 'Plus Jakarta Sans'), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-plex-mono, 'IBM Plex Mono'), ui-monospace, 'SFMono-Regular', Menlo, monospace;

  color-scheme: light;
}

/* Ikut sistem — hanya saat user BELUM memilih apa pun. Penjaga
 * :not([data-theme]) itu yang membuat pilihan eksplisit tetap menang. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: 17 26 25;
    --surface: 25 37 35;
    --surface-2: 21 31 30;
    --surface-3: 35 49 47;

    --ink: 221 230 227;
    --ink-soft: 173 188 184;
    --ink-muted: 139 157 154;   /* 5.6:1 di --surface */

    --line: 40 55 52;
    --line-soft: 33 47 45;

    --accent: 77 201 178;       /* 11.4:1 di --surface */
    --accent-strong: 108 220 198;
    --accent-ink: 5 32 27;      /* GELAP, karena aksennya terang */
    --accent-soft: 26 52 47;

    --field-bg: 21 31 30;
    --field-line: 45 61 58;
    --field-bg-disabled: 33 47 45;

    --ok-bg: 26 52 47;
    --ok-ink: 109 212 191;
    --warn-bg: 49 40 15;
    --warn-ink: 240 201 103;
    --danger-bg: 46 23 20;
    --danger-ink: 244 168 151;
    --danger-line: 74 36 30;
    --neutral-bg: 34 47 45;
    --neutral-ink: 175 191 188;

    --bar-ok: 77 201 178;
    --bar-mid: 68 87 84;
    --bar-low: 44 59 57;

    --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.55);

    color-scheme: dark;
  }
}

/* Pilihan eksplisit user. Nilainya sengaja DIULANG penuh, bukan mewarisi dari
 * aturan media di atas: aturan media hanya berlaku saat sistem gelap, jadi
 * tanpa pengulangan ini memilih "gelap" di perangkat terang tidak berefek. */
:root[data-theme='gelap'] {
  --bg: 17 26 25;
  --surface: 25 37 35;
  --surface-2: 21 31 30;
  --surface-3: 35 49 47;

  --ink: 221 230 227;
  --ink-soft: 173 188 184;
  --ink-muted: 139 157 154;

  --line: 40 55 52;
  --line-soft: 33 47 45;

  --accent: 77 201 178;
  --accent-strong: 108 220 198;
  --accent-ink: 5 32 27;
  --accent-soft: 26 52 47;

  --field-bg: 21 31 30;
  --field-line: 45 61 58;
  --field-bg-disabled: 33 47 45;

  --ok-bg: 26 52 47;
  --ok-ink: 109 212 191;
  --warn-bg: 49 40 15;
  --warn-ink: 240 201 103;
  --danger-bg: 46 23 20;
  --danger-ink: 244 168 151;
  --danger-line: 74 36 30;
  --neutral-bg: 34 47 45;
  --neutral-ink: 175 191 188;

  --bar-ok: 77 201 178;
  --bar-mid: 68 87 84;
  --bar-low: 44 59 57;

  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.55);

  color-scheme: dark;
}

/* Perangkat gelap + user memilih terang: nilai :root sudah benar, yang perlu
 * dipulihkan cuma color-scheme supaya kontrol bawaan (dropdown, scrollbar,
 * pemilih tanggal) kembali terang. Tanpa baris ini, <select> tetap gelap di
 * tengah halaman terang. */
:root[data-theme='terang'] {
  color-scheme: light;
}