/*
 * Token desain: SATU-SATUNYA tempat nilai warna, jarak, radius, dan ukuran huruf.
 * Komponen hanya memakai var(--...). Mode gelap hanya menimpa token warna di blok
 * [data-theme="dark"] di bawah; atribut itu diatur oleh assets/js/theme.js.
 *
 * Arah: alat operasional yang tenang dan padat data. Alas batu hangat, tinta hijau-hitam,
 * satu aksen petrol. Warna lain hanya dipakai untuk arti status (operasional/TO/TSO/belum diisi).
 * Motif: jalur rute (titik pemberhentian pada garis), mengikuti dunia armada bus.
 */
:root {
    color-scheme: light;

    /* Tipografi: IBM Plex Sans untuk semua teks, Plex Mono hanya untuk kode unit (pengenal). */
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
    /* Enam ukuran: xs/base/lg untuk teks, xl untuk judul halaman, kpi dan hero untuk angka. */
    --fs-xs: .75rem;
    --fs-base: .875rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.5rem;
    --fs-kpi: 2rem;
    --fs-hero: 3.5rem;
    --lh-tight: 1.15;
    --lh-base: 1.5;

    /* Jarak */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;

    /* Radius: kecil dan tegas, seperti label tiket; lingkaran hanya untuk titik. */
    --r-sm: 3px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-pill: 999px;

    /* Tata letak */
    --sidebar-w: 15rem;
    --topbar-h: 3.5rem;
    --content-max: 80rem;
    --control-h: 2.25rem;
    --nav-row: 2.25rem;

    /* Gerak */
    --dur: 140ms;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Warna: alas (bg), permukaan panel (surface), dan teks */
    --bg: #f1efe9;
    --surface: #fbfaf7;
    --subtle: #e8e5de;
    --line: #dedbd2;
    --line-strong: #c9c5b9;
    --line-control: #84806f; /* batas kontrol form: kontras 3:1 (WCAG 1.4.11) */
    --ink: #17211d;
    --muted: #565d56;
    --overlay: rgba(14, 20, 17, .5);
    --shadow-pop: 0 10px 30px rgba(23, 33, 29, .16), 0 2px 6px rgba(23, 33, 29, .08);

    /* Warna: merek dan aksen (petrol) */
    --brand: #17211d;
    --on-brand: #f6f5f0;
    --accent: #0a5c66;
    --accent-soft: #d6e8e6;
    --on-accent: #ffffff;
    --focus: #0a5c66;

    /* Warna: arti status. fill = titik/bar, soft = latar chip, ink = teks */
    --total: #17211d;
    --ok: #2f7d3f;
    --ok-soft: #dbeadb;
    --ok-ink: #1d5a2b;
    --to: #b27500;
    --to-soft: #f4e6c0;
    --to-ink: #6b4500;
    --tso: #c0392b;
    --tso-soft: #f6dad5;
    --tso-ink: #98201a;
    --unk: #7d8279;
    --unk-soft: #e3e1da;
    --unk-ink: #4a5048;
}

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

    --bg: #0f1513;
    --surface: #161e1b;
    --subtle: #1e2824;
    --line: #29342f;
    --line-strong: #3a4841;
    --line-control: #66766d;
    --ink: #e8ebe5;
    --muted: #9ea8a0;
    --overlay: rgba(3, 7, 5, .66);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);

    --brand: #e8ebe5;
    --on-brand: #0f1513;
    --accent: #62c3c8;
    --accent-soft: #153436;
    --on-accent: #0f1513;
    --focus: #8fd6da;

    --total: #e8ebe5;
    --ok: #5cc77a;
    --ok-soft: rgba(92, 199, 122, .14);
    --ok-ink: #8fdba5;
    --to: #e8b339;
    --to-soft: rgba(232, 179, 57, .14);
    --to-ink: #f1cc73;
    --tso: #ef7a6e;
    --tso-soft: rgba(239, 122, 110, .15);
    --tso-ink: #f6a79e;
    --unk: #868e86;
    --unk-soft: rgba(150, 160, 150, .14);
    --unk-ink: #b9c2ba;
}