/* Token ISPKU — mengikuti Pak Apps Design System 1.2.1.

   Nilainya sengaja ditulis sebagai hex, bukan `hsl(var(--pa-*))`: berkas ini
   juga dimuat halaman cetak invoice dan kwitansi yang dirender WeasyPrint
   menjadi PDF, dan di sana warna harus terbaca tanpa bergantung pada berkas
   lain. Padanan tokennya dicatat di tiap baris; sumbernya
   `pakapps-tokens.css` (salinan utuh, dimuat `base.html`) dan
   `token/warna-hex.json` di repositori standar.

   Huruf: Inter untuk teks, JetBrains Mono untuk pengenal mesin (CID, nomor
   layanan, IP, VLAN). Keduanya lokal di `fonts/pakapps/`, tanpa CDN. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/pakapps/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/pakapps/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/static/fonts/pakapps/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Skala seluruh ukuran huruf. Semua font-size ditulis
     `calc(Npx * var(--skala-font))`, jadi mengubah angka ini saja sudah
     mengubah seluruh aplikasi — tidak perlu menyisir 61 deklarasi lagi. */
  --skala-font: 1;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --huruf-teks: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --huruf-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Skala huruf: sembilan anak tangga, tidak ada ukuran di antaranya. */
  --teks-2xs: calc(11px * var(--skala-font));
  --teks-xs: calc(12px * var(--skala-font));
  --teks-sm: calc(13px * var(--skala-font));
  --teks-base: calc(14px * var(--skala-font));
  --teks-md: calc(16px * var(--skala-font));
  --teks-lg: calc(18px * var(--skala-font));
  --teks-xl: calc(22px * var(--skala-font));
  --teks-2xl: calc(28px * var(--skala-font));
  --teks-3xl: calc(34px * var(--skala-font));

  --bg: #f0f2f5;              /* --pa-latar */
  --surface: #ffffff;         /* --pa-permukaan-1 */
  --surface-muted: #e6eaef;   /* --pa-permukaan-2: kepala tabel, panel dalam */
  --border: #d6dae1;          /* --pa-garis */
  --border-kuat: #768293;     /* --pa-garis-kuat: tepi isian formulir */

  --text: #181c25;            /* --pa-teks */
  --text-muted: #4b5363;      /* --pa-teks-2 */
  --text-subtle: #5a6372;     /* --pa-teks-redup */

  /* Aksen bawaan = warna tautan dan tombol utama Pak Apps. Warna merek
     pemasangan menimpanya dari `base.html`. */
  --accent: #124bc4;          /* --pa-tautan */
  --accent-hover: #0e3c9e;
  --accent-soft: #e8eefb;
  --fokus: #1659e9;           /* --pa-fokus */

  /* Latar sidebar ditimpa warna dari Pengaturan → Merek Aplikasi. */
  --sidebar-bg: #0b1220;
  --sidebar-text: rgba(255, 255, 255, .72);
  --sidebar-submenu-active: rgba(255, 255, 255, .12);

  /* Warna aksen untuk TULISAN. Di tema terang sama dengan aksen; di tema
     gelap dicerahkan supaya tautan tetap terbaca di atas latar gelap. */
  --accent-teks: var(--accent);
  --hero-atas: #fbfcfe;
  --hero-bawah: #eef2f9;

  /* Status: isi (solid), teks, latar. `jingga` = antrean — pekerjaan yang
     menunggu, tidak pernah merah. */
  --sukses: #25935f;      --sukses-fg: #126840;     --sukses-bg: #e7f8f0;
  --peringatan: #ba7908;  --peringatan-fg: #834907; --peringatan-bg: #fff5d6;
  --jingga: #dc5e09;      --jingga-fg: #9b3908;     --jingga-bg: #ffefe0;
  --bahaya: #db2436;      --bahaya-fg: #a71b29;     --bahaya-bg: #feeced;
  --info: #1c70c4;        --info-fg: #104d93;       --info-bg: #e8f2fc;
  --ungu: #7c4ddb;        --ungu-fg: #6129c2;       --ungu-bg: #f1ecfe;
  --netral: #768193;      --netral-fg: #4f5869;     --netral-bg: #eaedf1;

  --pastel-biru: #e8f2fc;
  --pastel-hijau: #e7f8f0;
  --pastel-ungu: #f1ecfe;
  --pastel-jingga: #ffefe0;
  --pastel-merah: #feeced;
  --pastel-netral: #eaedf1;

  /* Deret grafik, urutannya tetap supaya warna satu deret sama di semua
     halaman. */
  --grafik-1: #1361ec;
  --grafik-2: #8d46d7;
  --grafik-3: #298e60;
  --grafik-4: #d88c0e;
  --grafik-5: #16a2b6;

  --radius-kecil: 4px;
  --radius-kontrol: 6px;
  --radius-kartu: 10px;
  --radius-besar: 14px;
  --radius-pil: 999px;
  --bayangan: 0 1px 2px rgba(12, 17, 29, .05), 0 4px 12px rgba(12, 17, 29, .05);
  --bayangan-angkat: 0 2px 6px rgba(12, 17, 29, .08), 0 12px 28px rgba(12, 17, 29, .10);

  /* Gerak: hanya transform dan opacity, tidak pernah lebih dari 300 ms. */
  --durasi-mikro: 140ms;
  --durasi-masuk: 220ms;
  --ease-keluar: cubic-bezier(0.23, 1, 0.32, 1);

  /* Tinggi kontrol: satu ukuran untuk tombol dan isian supaya sebaris rata. */
  --kontrol-tinggi: 36px;
  --kontrol-tinggi-kecil: 32px;

  --sidebar-lebar: 232px;
  --topbar-tinggi: 56px;
}

/* Tema gelap — nilai Pak Apps Design System (blok `.dark`). Dipasang lewat
   `data-theme="dark"` di <html> oleh tombol di topbar. Halaman cetak dan
   PDF tidak pernah memakai atribut itu, jadi tetap terang. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f19;
  --surface: #111722;
  --surface-muted: #1b212c;
  --border: #222b3a;
  --border-kuat: #606d80;

  --text: #eaedf1;
  --text-muted: #b1bbc9;
  --text-subtle: #939eae;

  --accent-teks: color-mix(in srgb, var(--accent) 45%, white);
  --fokus: #61a6fa;
  --hero-atas: #141b29;
  --hero-bawah: #0f1520;

  --sukses: hsl(152 55% 48%);      --sukses-fg: hsl(152 60% 62%);     --sukses-bg: hsl(152 40% 13%);
  --peringatan: hsl(40 92% 52%);   --peringatan-fg: hsl(43 96% 66%);  --peringatan-bg: hsl(38 50% 13%);
  --jingga: hsl(24 95% 58%);       --jingga-fg: hsl(26 100% 70%);     --jingga-bg: hsl(24 50% 14%);
  --bahaya: hsl(354 80% 62%);      --bahaya-fg: hsl(354 90% 76%);     --bahaya-bg: hsl(354 45% 15%);
  --info: hsl(210 85% 62%);        --info-fg: hsl(210 90% 76%);       --info-bg: hsl(212 45% 15%);
  --ungu: hsl(258 90% 72%);        --ungu-fg: hsl(258 90% 80%);       --ungu-bg: hsl(258 40% 18%);
  --netral: hsl(215 14% 50%);      --netral-fg: hsl(215 16% 72%);     --netral-bg: hsl(220 18% 16%);

  --pastel-hijau: var(--sukses-bg);
  --pastel-ungu: var(--ungu-bg);
  --pastel-jingga: var(--jingga-bg);
  --pastel-merah: var(--bahaya-bg);
  --pastel-netral: var(--netral-bg);

  --bayangan: 0 1px 2px rgba(0, 0, 0, .4);
  --bayangan-angkat: 0 4px 12px rgba(0, 0, 0, .45), 0 0 0 1px #232d3d;
}

@media (prefers-reduced-motion: reduce) {
  :root { --durasi-mikro: 0ms; --durasi-masuk: 0ms; }
}