/* JLS — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: var(--arang-0); /* Latar halaman, layar, dan kanvas utama. Putih di terang, hitam arang di gelap. */
  --surface-subtle: var(--arang-25); /* Latar aplikasi di belakang kartu, dan pita pemisah bagian di halaman panjang. */
  --surface-raised: var(--arang-0); /* Kartu, panel, menu, dialog. Di terang dipisah dengan `shadow-sm`; di gelap dengan warna yang lebih terang. */
  --surface-sunken: var(--arang-50); /* Isian formulir, sumur data, dan latar kode. Lebih rendah dari permukaan di sekitarnya. */
  --surface-hover: var(--arang-100); /* Latar saat kursor di atas baris, item menu, atau tombol netral. */
  --surface-inverse: var(--emas-400); /* Bidang kontras emas Juara Kargo, sama dengan isian aksi `brand`: tooltip, bilah aksi massal, lencana padat merek, potongan label. #EFBF04 dengan teks hitam arang di terang, emas gelap #9D7D02 dengan teks putih di gelap. Teks di atasnya `ink-inverse`. */
  --line: var(--arang-200); /* Garis rambut pemisah baris dan bagian. Dekoratif saja, bukan batas kontrol. */
  --line-strong: var(--arang-500); /* Batas kontrol (isian, kotak centang) dan garis yang membawa makna; minimal 3:1 di semua permukaan. */
  --ink: var(--arang-950); /* Teks utama dan ikon utama di `surface`, `surface-subtle`, `surface-raised`, `surface-sunken`, dan `surface-hover`. */
  --ink-muted: var(--arang-600); /* Teks sekunder, label, metadata, dan ikon pendamping di semua permukaan; minimal 4.5:1. */
  --ink-disabled: var(--arang-400); /* Teks dan ikon kontrol nonaktif saja. Tidak untuk teks yang perlu dibaca. */
  --ink-inverse: var(--arang-950); /* Teks dan ikon di `surface-inverse`: hitam arang di terang (10.3:1), putih di gelap (4.6:1). */
  --brand: var(--emas-400); /* Isian aksi emas Juara Kargo: tombol utama, halaman aktif, tanggal terpilih, hitungan merek, kartu sorotan. Terang: emas logo `emas-400` #EFBF04 dengan teks hitam arang (10.3:1). Gelap: emas gelap #9D7D02 dengan teks putih (3.9:1, disetujui pemilik; huruf tombol tebal 600). Kilau emas `jls-kilau` lewat saat kursor di atasnya. Teks dan ikon di atasnya selalu `on-brand`. */
  --brand-hover: var(--emas-500); /* Isian aksi saat kursor di atasnya, satu langkah lebih pekat, bersama kilau emas. Terang `emas-500` (8.4:1 dengan teks arang), gelap #907302 (4.5:1 dengan teks putih). */
  --brand-pressed: var(--emas-600); /* Isian aksi saat ditekan. Terang `emas-600` (6.6:1), gelap #846902 (5.3:1). */
  --brand-strong: var(--arang-950); /* Teks dan ikon merek di semua permukaan dan di `brand-soft`: menu aktif, lencana merek, pilihan terpilih, avatar petugas. Hitam arang di terang (tidak ada teks cokelat), emas terang di gelap; minimal 4.5:1. Penanda emas di sampingnya memakai `brand-aksen`. */
  --brand-aksen: var(--emas-400); /* Emas Juara untuk tanda yang bukan teks: isian kotak centang, radio, dan sakelar yang terpilih, garis tab aktif, batang kemajuan, garis langkah dan linimasa, tepi pilihan yang aktif, garis kutipan, butir daftar, dan garis bawah tautan. Sama dengan tombol `brand`: #EFBF04 di terang, #9D7D02 di gelap. Selalu disertai teks, angka, atau tanda lain yang menjelaskan keadaannya. Bukan untuk teks. */
  --on-aksen: var(--arang-950); /* Tanda di atas isian `brand-aksen` dan di tengah `kenop-aksen`: centang, tanda minus, centang langkah selesai, dan titik di tengah titik radio, kenop sakelar, dan titik linimasa. Seperti teks tombol: hitam arang di terang (10.3:1), putih di gelap (3.9:1). */
  --kenop-aksen: var(--arang-0); /* Bulatan di atas isian `brand-aksen`: titik radio, kenop sakelar yang nyala, dan tengah titik linimasa saat ini. Terang: putih dengan titik hitam `on-aksen` di tengahnya. Gelap: hitam dengan titik putih `on-aksen` di tengahnya. */
  --brand-soft: var(--emas-50); /* Latar terpilih yang lembut: menu aktif, baris terpilih, pilihan di daftar, lencana merek. Teks di atasnya `brand-strong` atau `ink`. */
  --on-brand: var(--arang-950); /* Teks dan ikon di atas `brand`, `brand-hover`, dan `brand-pressed`: hitam arang di terang (10.3:1), putih di gelap (4.6:1). */
  --kilau: rgba(255, 255, 255, 0.6); /* Cahaya kilau yang menyapu isian `brand` saat kursor di atasnya (animasi `jls-kemilau`). */
  --focus: var(--emas-700); /* Cincin fokus papan ketik: garis 2px dengan jarak 2px dari elemen; minimal 3:1 di semua permukaan. */
  --success: var(--hijau-700); /* Isian dan ikon berhasil (terkirim, lolos, selesai). `hijau-700` di kedua tema agar teks putih di atasnya terbaca. Teks di atasnya `on-success`. */
  --success-ink: var(--hijau-800); /* Teks status berhasil di permukaan dan di `success-soft`. */
  --success-soft: var(--hijau-50); /* Latar lembut pesan dan lencana berhasil. */
  --on-success: var(--arang-0); /* Teks dan ikon putih di atas `success` (5.9:1). */
  --warning: var(--jingga-600); /* Isian dan ikon peringatan (tertunda, perlu tindakan). Jingga tua `jingga-600` di kedua tema agar teks putih di atasnya terbaca. Sengaja jauh dari emas merek. Teks di atasnya `on-warning`. */
  --warning-ink: var(--jingga-700); /* Teks peringatan di permukaan dan di `warning-soft`. */
  --warning-soft: var(--jingga-50); /* Latar lembut pesan dan lencana peringatan. */
  --on-warning: var(--arang-0); /* Teks dan ikon putih di atas `warning` (4.7:1). */
  --danger: var(--merah-600); /* Isian, tepi galat, dan ikon bahaya (gagal, tertahan, batal). `merah-600` di kedua tema agar teks putih di atasnya terbaca. Teks di atasnya `on-danger`. */
  --danger-ink: var(--merah-700); /* Teks bahaya dan galat formulir di permukaan dan di `danger-soft`. */
  --danger-soft: var(--merah-50); /* Latar lembut pesan dan lencana bahaya. */
  --on-danger: var(--arang-0); /* Teks dan ikon putih di atas `danger` (4.9:1). */
  --info: var(--biru-700); /* Isian dan ikon informasi (sedang diproses, dalam penerbangan). `biru-700` di kedua tema agar teks putih di atasnya terbaca. Teks di atasnya `on-info`. */
  --info-ink: var(--biru-700); /* Teks informasi di permukaan dan di `info-soft`. */
  --info-soft: var(--biru-50); /* Latar lembut pesan dan lencana informasi. */
  --on-info: var(--arang-0); /* Teks dan ikon putih di atas `info` (6.4:1). */
  --data-1: #b78b00; /* Grafik, seri ke-1 (emas). Urutan tetap, tidak diputar; lolos uji buta warna di kedua tema. */
  --data-2: #2b7ad6; /* Grafik, seri ke-2 (biru). Urutan tetap, tidak diputar; lolos uji buta warna di kedua tema. */
  --data-3: #d55c13; /* Grafik, seri ke-3 (jingga). Urutan tetap, tidak diputar; lolos uji buta warna di kedua tema. */
  --data-4: #008d87; /* Grafik, seri ke-4 (toska). Urutan tetap, tidak diputar; lolos uji buta warna di kedua tema. */
  --data-5: #cb4644; /* Grafik, seri ke-5 (merah). Urutan tetap, tidak diputar; lolos uji buta warna di kedua tema. */
  --data-6: #8e71d6; /* Grafik, seri ke-6 (ungu). Urutan tetap, tidak diputar; lolos uji buta warna di kedua tema. */
  --data-7: #33903c; /* Grafik, seri ke-7 (hijau). Urutan tetap, tidak diputar; lolos uji buta warna di kedua tema. */
  --data-8: #c65b93; /* Grafik, seri ke-8 (magenta). Urutan tetap, tidak diputar; lolos uji buta warna di kedua tema. */
  --mitra-garuda: #0b4f7c; /* Garuda Indonesia (GA) di grafik dan penanda mitra: biru tua di terang (8.7:1 di atas putih), biru muda di gelap. Hanya untuk mewakili Garuda Indonesia, bukan hiasan. Nilai perkiraan dari warna biru logo Garuda Indonesia; cocokkan dengan pedoman merek resmi mitra. */
  --mitra-garuda-aksen: #22a7d6; /* Biru ketiga Garuda Indonesia: titik data, cincin penanda, dan sorotan pada seri Garuda. */
  --mitra-citilink: #4d8f17; /* Citilink (QG) di grafik dan penanda mitra: hijau tua di terang (4.0:1 di atas putih), hijau limau di gelap. Hanya untuk mewakili Citilink. Nilai perkiraan dari warna logo Citilink; cocokkan dengan pedoman merek resmi mitra. */
  --mitra-citilink-aksen: #ffc20e; /* Kuning Citilink: titik data dan cincin penanda pada seri Citilink, tidak untuk teks. */
  --rekan-1: #1d5fc9; /* Warna identitas rekan ke-1 (biru): kursor, cincin avatar, sorotan rekan. Teks putih 5.9:1. */
  --rekan-2: #b4236f; /* Warna identitas rekan ke-2 (magenta): kursor, cincin avatar, sorotan rekan. Teks putih 6.2:1. */
  --rekan-3: #0b7a70; /* Warna identitas rekan ke-3 (toska): kursor, cincin avatar, sorotan rekan. Teks putih 5.2:1. */
  --rekan-4: #c2410c; /* Warna identitas rekan ke-4 (jingga): kursor, cincin avatar, sorotan rekan. Teks putih 5.2:1. */
  --rekan-5: #7339d6; /* Warna identitas rekan ke-5 (ungu): kursor, cincin avatar, sorotan rekan. Teks putih 6.4:1. */
  --rekan-6: #2e7a1f; /* Warna identitas rekan ke-6 (hijau): kursor, cincin avatar, sorotan rekan. Teks putih 5.4:1. */
  --rekan-7: #c0302b; /* Warna identitas rekan ke-7 (merah): kursor, cincin avatar, sorotan rekan. Teks putih 5.7:1. */
  --rekan-8: #08708f; /* Warna identitas rekan ke-8 (sian): kursor, cincin avatar, sorotan rekan. Teks putih 5.6:1. */
  --on-rekan: var(--arang-0); /* Teks nama di atas warna rekan: putih di terang, hitam di gelap. */
  --paper: #ffffff; /* Kertas cetak, label, dan PDF. Sama di kedua tema. */
  --print-ink: #000000; /* Tinta hitam murni untuk cetak satu warna, cap, faks, dan label termal. Sama di kedua tema. */
  --scrim: #0c0b0a8f; /* Tirai di belakang dialog dan lembar bawah. */
  --emas-50: #fef8e0; /* Skala emas, langkah 50. */
  --emas-100: #fdf1c2; /* Skala emas, langkah 100. */
  --emas-200: #fbe492; /* Skala emas, langkah 200. */
  --emas-300: #f8d257; /* Skala emas, langkah 300. */
  --emas-400: #efbf04; /* Skala emas, langkah 400. */
  --emas-500: #d7ac03; /* Skala emas dari gradasi logo: 600 = ujung atas logo #BF9903, 400 = ujung bawah #EFBF04, 500 = titik tengahnya. */
  --emas-600: #bf9903; /* Skala emas, langkah 600. */
  --emas-700: #a27905; /* Skala emas, langkah 700. */
  --emas-800: #845c0f; /* Skala emas, langkah 800. */
  --emas-900: #64430d; /* Skala emas, langkah 900. */
  --emas-950: #402807; /* Skala emas, langkah 950. */
  --arang-0: #ffffff; /* Netral hangat dengan sedikit rona emas. 0 putih murni, 1000 hitam arang. */
  --arang-25: #fcfbfa; /* Skala arang, langkah 25. */
  --arang-50: #f6f6f3; /* Skala arang, langkah 50. */
  --arang-100: #ecebe8; /* Skala arang, langkah 100. */
  --arang-200: #dddcd9; /* Skala arang, langkah 200. */
  --arang-300: #c5c4c0; /* Skala arang, langkah 300. */
  --arang-400: #a5a39e; /* Skala arang, langkah 400. */
  --arang-500: #85837e; /* Netral hangat dengan sedikit rona emas. 0 putih murni, 1000 hitam arang. */
  --arang-600: #6a6964; /* Skala arang, langkah 600. */
  --arang-700: #53514d; /* Skala arang, langkah 700. */
  --arang-800: #3a3936; /* Skala arang, langkah 800. */
  --arang-900: #262522; /* Skala arang, langkah 900. */
  --arang-950: #181715; /* Skala arang, langkah 950. */
  --arang-1000: #0c0b0a; /* Skala arang, langkah 1000. */
  --hijau-50: #e8fdef; /* Skala hijau, langkah 50. */
  --hijau-100: #d2f8de; /* Skala hijau, langkah 100. */
  --hijau-200: #adefc2; /* Skala hijau, langkah 200. */
  --hijau-300: #7ede9f; /* Skala hijau, langkah 300. */
  --hijau-400: #4ec87b; /* Skala hijau, langkah 400. */
  --hijau-500: #1bac5b; /* Skala status berhasil. */
  --hijau-600: #008f45; /* Skala hijau, langkah 600. */
  --hijau-700: #007434; /* Skala hijau, langkah 700. */
  --hijau-800: #005a25; /* Skala hijau, langkah 800. */
  --hijau-900: #004217; /* Skala hijau, langkah 900. */
  --hijau-950: #002c0c; /* Skala hijau, langkah 950. */
  --jingga-50: #fff5ed; /* Skala jingga, langkah 50. */
  --jingga-100: #ffe8d8; /* Skala jingga, langkah 100. */
  --jingga-200: #ffd2b4; /* Skala jingga, langkah 200. */
  --jingga-300: #ffb27e; /* Skala jingga, langkah 300. */
  --jingga-400: #ff8828; /* Skala jingga, langkah 400. */
  --jingga-500: #de6c00; /* Skala status peringatan, jauh dari rona emas agar tidak tertukar. */
  --jingga-600: #b95700; /* Skala jingga, langkah 600. */
  --jingga-700: #984500; /* Skala jingga, langkah 700. */
  --jingga-800: #783300; /* Skala jingga, langkah 800. */
  --jingga-900: #592300; /* Skala jingga, langkah 900. */
  --jingga-950: #3d1500; /* Skala jingga, langkah 950. */
  --merah-50: #fff4f3; /* Skala merah, langkah 50. */
  --merah-100: #ffe6e3; /* Skala merah, langkah 100. */
  --merah-200: #ffcfca; /* Skala merah, langkah 200. */
  --merah-300: #ffada4; /* Skala merah, langkah 300. */
  --merah-400: #ff8277; /* Skala merah, langkah 400. */
  --merah-500: #f25048; /* Skala status bahaya. */
  --merah-600: #d4312c; /* Skala merah, langkah 600. */
  --merah-700: #b11b1a; /* Skala merah, langkah 700. */
  --merah-800: #8d0c0c; /* Skala merah, langkah 800. */
  --merah-900: #690303; /* Skala merah, langkah 900. */
  --merah-950: #490000; /* Skala merah, langkah 950. */
  --biru-50: #f1f8ff; /* Skala biru, langkah 50. */
  --biru-100: #e0efff; /* Skala biru, langkah 100. */
  --biru-200: #c4dfff; /* Skala biru, langkah 200. */
  --biru-300: #9dc9ff; /* Skala biru, langkah 300. */
  --biru-400: #6eafff; /* Skala biru, langkah 400. */
  --biru-500: #3a91f8; /* Skala status informasi, juga kutub dingin grafik divergen. */
  --biru-600: #1e75db; /* Skala biru, langkah 600. */
  --biru-700: #105db9; /* Skala biru, langkah 700. */
  --biru-800: #094794; /* Skala biru, langkah 800. */
  --biru-900: #05326f; /* Skala biru, langkah 900. */
  --biru-950: #03204d; /* Skala biru, langkah 950. */
  --shadow-xs: 0 1px 2px rgba(12, 11, 10, 0.06); /* Elemen yang nyaris rata: tombol netral, isian. */
  --shadow-sm: 0 1px 2px rgba(12, 11, 10, 0.05), 0 2px 8px rgba(12, 11, 10, 0.06); /* Kartu dan panel di atas `surface` atau `surface-subtle`. */
  --shadow-md: 0 2px 4px rgba(12, 11, 10, 0.04), 0 8px 24px rgba(12, 11, 10, 0.08); /* Menu, popover, kartu yang diangkat saat hover. */
  --shadow-lg: 0 4px 8px rgba(12, 11, 10, 0.05), 0 16px 40px rgba(12, 11, 10, 0.12); /* Toast, header lengket, panel melayang. */
  --shadow-xl: 0 8px 16px rgba(12, 11, 10, 0.06), 0 32px 72px rgba(12, 11, 10, 0.18); /* Dialog dan lembar bawah. */
  --shadow-emas: 0 1px 2px rgba(132, 92, 15, 0.10), 0 4px 12px -4px rgba(132, 92, 15, 0.28); /* Bayangan hangat di bawah isian `brand` yang menjadi aksi utama. Satu per tampilan. */
  --shadow-inset: inset 0 1px 2px rgba(12, 11, 10, 0.06); /* Isian dan sumur yang tertanam. */
}
[data-theme="dark"] {
  --surface: var(--arang-1000);
  --surface-subtle: var(--arang-950);
  --surface-raised: var(--arang-900);
  --surface-sunken: var(--arang-950);
  --surface-hover: var(--arang-800);
  --surface-inverse: #9D7D02;
  --line: var(--arang-800);
  --line-strong: var(--arang-500);
  --ink: var(--arang-25);
  --ink-muted: var(--arang-400);
  --ink-disabled: var(--arang-600);
  --ink-inverse: var(--arang-0);
  --brand: #9D7D02;
  --brand-hover: #907302;
  --brand-pressed: #846902;
  --brand-strong: var(--emas-300);
  --brand-aksen: #9D7D02;
  --on-aksen: var(--arang-0);
  --kenop-aksen: var(--arang-1000);
  --brand-soft: var(--arang-900);
  --on-brand: var(--arang-0);
  --kilau: rgba(255, 233, 160, 0.38);
  --focus: var(--emas-400);
  --success: var(--hijau-700);
  --success-ink: var(--hijau-300);
  --success-soft: var(--hijau-950);
  --on-success: var(--arang-0);
  --warning: var(--jingga-600);
  --warning-ink: var(--jingga-300);
  --warning-soft: var(--jingga-950);
  --on-warning: var(--arang-0);
  --danger: var(--merah-600);
  --danger-ink: var(--merah-300);
  --danger-soft: var(--merah-950);
  --on-danger: var(--arang-0);
  --info: var(--biru-700);
  --info-ink: var(--biru-300);
  --info-soft: var(--biru-950);
  --on-info: var(--arang-0);
  --data-1: #b78b00;
  --data-2: #408dea;
  --data-3: #dc631e;
  --data-4: #00a19b;
  --data-5: #e15955;
  --data-6: #9477dd;
  --data-7: #47a34e;
  --data-8: #cd6199;
  --mitra-garuda: #22a7d6;
  --mitra-garuda-aksen: #5bc4e8;
  --mitra-citilink: #8dc63f;
  --mitra-citilink-aksen: #ffc20e;
  --rekan-1: #7fb0ff;
  --rekan-2: #ff8cc6;
  --rekan-3: #4fd1c5;
  --rekan-4: #ffa066;
  --rekan-5: #b9a2ff;
  --rekan-6: #8fd16f;
  --rekan-7: #ff9090;
  --rekan-8: #5fd0f2;
  --on-rekan: var(--arang-1000);
  --scrim: #000000a3;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.5), 0 32px 72px rgba(0, 0, 0, 0.65);
  --shadow-emas: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px -4px rgba(0, 0, 0, 0.50);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
:root {
  --space-0: 0px; /* Tanpa jarak. */
  --space-0\.5: 2px; /* Jarak rambut: antara ikon dan lencana kecil, celah potongan. */
  --space-1: 4px; /* Jarak terkecil: ikon ke teks di dalam lencana. */
  --space-2: 8px; /* Ikon ke teks di tombol; antar-elemen yang sangat dekat. */
  --space-3: 12px; /* Padding lencana dan tombol kecil; jarak label ke isian. */
  --space-4: 16px; /* Padding isian dan tombol; margin halaman di ponsel. */
  --space-5: 20px; /* Padding kartu padat. */
  --space-6: 24px; /* Padding kartu bawaan; gutter kisi; jarak antar-kartu. */
  --space-8: 32px; /* Jarak antar-kelompok di dalam bagian; padding dialog. */
  --space-10: 40px; /* Margin halaman di tablet. */
  --space-12: 48px; /* Jarak antar-bagian di aplikasi. */
  --space-16: 64px; /* Jarak antar-bagian di halaman pemasaran. */
  --space-20: 80px; /* Ruang napas di sekitar judul hero. */
  --space-24: 96px; /* Jarak antar-bagian besar di halaman pemasaran. */
  --space-32: 128px; /* Ruang di atas dan bawah hero. */
  --space-40: 160px; /* Jarak terbesar untuk halaman pemasaran layar lebar. */
  --radius-0: 0px; /* Sudut tajam: tepi yang menempel ke tepi layar atau kertas, tabel cetak. */
  --radius-xs: 4px; /* Kotak centang, tag kode, CargoTag, sel kecil. */
  --radius-sm: 8px; /* Kontrol kecil (32px), tooltip, item menu. */
  --radius-md: 12px; /* Tombol dan isian bawaan (44px), lencana persegi. */
  --radius-lg: 16px; /* Kartu kecil, menu, popover, toast. */
  --radius-xl: 24px; /* Kartu besar, panel, lembar bawah. */
  --radius-2xl: 32px; /* Dialog, wadah hero, bidang visual 3D. */
  --radius-full: 9999px; /* Kapsul: chip, lencana status, penanda, avatar. */
  --border-hairline: 1px; /* Garis rambut `line` dan batas kartu di gelap. */
  --border-regular: 1.5px; /* Batas isian dan kotak centang (`line-strong`). */
  --border-strong: 2px; /* Batas terpilih, garis bermakna, cincin fokus (`focus`). */
  --border-heavy: 4px; /* Garis tebal penanda: indikator tab aktif, garis motif lintasan kecil. */
  --opacity-hover: 0.06; /* Lapisan hover di atas isian berwarna. */
  --opacity-pressed: 0.12; /* Lapisan tekan di atas isian berwarna. */
  --opacity-disabled: 0.4; /* Gambar dan ilustrasi nonaktif. Teks nonaktif memakai `ink-disabled`. */
  --opacity-tekstur: 0.25; /* Kekuatan bintik tekstur emas logo; jangan lebih tinggi. */
  --opacity-material: 0.78; /* Bahan tembus pandang (header, toast) sebelum blur. */
  --duration-instant: 0ms; /* Tanpa animasi: perubahan tema, pengurangan gerak. */
  --duration-xs: 100ms; /* Umpan balik tekan, perubahan warna hover. */
  --duration-sm: 160ms; /* Muncul dan hilangnya elemen kecil: tooltip, menu. */
  --duration-md: 240ms; /* Bawaan transisi antarmuka: panel, tab, akordeon. */
  --duration-lg: 400ms; /* Dialog, lembar bawah, perpindahan halaman. */
  --duration-xl: 640ms; /* Gerak lintasan: elemen meluncur di sudut 30°, kamera 3D pendek. */
  --duration-2xl: 1000ms; /* Momen merek dan perjalanan kamera 3D panjang. Paling banyak satu per tampilan. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* Bawaan: mulai sigap, berhenti halus. */
  --ease-enter: cubic-bezier(0, 0, 0.2, 1); /* Elemen yang masuk ke layar. */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Elemen yang keluar dari layar. */
  --ease-lintasan: cubic-bezier(0.65, 0, 0.35, 1); /* Gerak berpindah tempat dan kamera 3D: percepatan dan perlambatan simetris. */
  --ease-pegas: linear(0, 0.18 6%, 0.55 14%, 0.86 24%, 1.03 34%, 1.06 42%, 1.02 56%, 0.995 72%, 1); /* Pegas lembut dengan lewatan 6%: pilihan aktif yang berpindah, kartu yang mendarat. */
  --bp-sm: 640px; /* Ponsel besar dan lebih. */
  --bp-md: 768px; /* Tablet tegak. */
  --bp-lg: 1024px; /* Tablet mendatar dan laptop: kisi 12 kolom dimulai. */
  --bp-xl: 1280px; /* Desktop: lebar konten maksimal tercapai. */
  --bp-2xl: 1536px; /* Layar lebar dan dasbor operasional. */
  --size-control-sm: 32px; /* Tinggi kontrol di tabel dan toolbar padat. */
  --size-control-md: 44px; /* Tinggi kontrol bawaan; target sentuh minimum. */
  --size-control-lg: 52px; /* Tinggi tombol utama dan isian di halaman pelanggan ponsel. */
  --size-icon-sm: 16px; /* Ikon di dalam teks, lencana, dan kontrol kecil. */
  --size-icon-md: 20px; /* Ikon di tombol, isian, dan navigasi. */
  --size-icon-lg: 24px; /* Ikon mandiri, ukuran gambar asli ikon. */
  --size-icon-xl: 32px; /* Ikon penanda keadaan kosong dan fitur. */
  --size-header: 64px; /* Tinggi header aplikasi dan situs. */
  --size-content-max: 1280px; /* Lebar konten maksimal. */
  --size-text-max: 68ch; /* Lebar baris bacaan maksimal. */
  --size-form-max: 560px; /* Lebar formulir maksimal. */
  --size-dialog-sm: 400px; /* Dialog konfirmasi. */
  --size-dialog-md: 560px; /* Dialog formulir. */
  --size-dialog-lg: 800px; /* Dialog rincian. */
  --z-base: 0; /* Isi halaman. */
  --z-raised: 10; /* Kartu yang diangkat, kolom tabel lengket. */
  --z-sticky: 100; /* Bilah lengket di dalam halaman. */
  --z-header: 200; /* Header aplikasi. */
  --z-dropdown: 300; /* Menu dan popover. */
  --z-overlay: 400; /* Tirai `scrim`. */
  --z-dialog: 500; /* Dialog dan lembar bawah. */
  --z-toast: 600; /* Toast. */
  --z-tooltip: 700; /* Tooltip. */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono", monospace;
  --text-display-2xl: 800 72px/76px var(--font-sans); /* Hero halaman utama, sampul, materi pemasaran besar. */
  --text-display-xl: 800 56px/60px var(--font-sans); /* Judul bagian halaman pemasaran, unggahan media sosial. */
  --text-display-lg: 800 44px/48px var(--font-sans); /* Judul besar di aplikasi, angka utama di sampul laporan. */
  --text-heading-1: 700 34px/40px var(--font-sans); /* Judul halaman, satu per halaman. */
  --text-heading-2: 700 26px/32px var(--font-sans); /* Judul bagian. */
  --text-heading-3: 600 20px/28px var(--font-sans); /* Judul kartu dan panel. */
  --text-heading-4: 600 17px/24px var(--font-sans); /* Judul kelompok kecil, judul baris daftar. */
  --text-body-lg: 400 18px/28px var(--font-sans); /* Paragraf halaman pelanggan dan pemasaran. */
  --text-body: 400 16px/24px var(--font-sans); /* Teks bawaan situs, email, dan formulir pelanggan. */
  --text-body-sm: 400 14px/20px var(--font-sans); /* Teks bawaan aplikasi operasional yang padat, tabel, keterangan. */
  --text-caption: 500 12px/16px var(--font-sans); /* Keterangan kecil, catatan kaki, cap waktu sekunder. */
  --text-label: 600 14px/20px var(--font-sans); /* Label isian, tab, item navigasi. */
  --text-label-sm: 600 12px/16px var(--font-sans); /* Judul kolom tabel, label kartu angka, lencana. */
  --text-button: 600 15px/20px var(--font-sans); /* Label tombol. */
  --text-overline: 700 12px/16px var(--font-sans); /* Penanda di atas judul, ditulis kapital, warna `brand-strong` atau `ink-muted`. */
  --text-angka-xl: 800 40px/44px var(--font-sans); /* Angka utama kartu metrik. Plus Jakarta Sans dengan `font-variant-numeric: tabular-nums`. */
  --text-kode-lg: 600 24px/32px var(--font-mono); /* AWB dan kode bandara di kepala halaman rincian. */
  --text-kode: 500 15px/22px var(--font-mono); /* AWB, nomor penerbangan, dan kode di kartu, tabel, formulir. */
  --text-kode-sm: 500 13px/18px var(--font-mono); /* Nomor dokumen, cap waktu sistem, kode di tabel padat. */
  --text-cetak-judul: 800 21.333px/26.667px var(--font-sans); /* Judul dokumen, 16 pt, kapital. */
  --text-cetak-subjudul: 700 14.667px/18.667px var(--font-sans); /* Judul bagian dokumen, 11 pt. */
  --text-cetak-isi: 400 13.333px/20px var(--font-sans); /* Isi surat dan dokumen, 10 pt, spasi 1.5. */
  --text-cetak-tabel: 400 12px/16px var(--font-sans); /* Isi tabel dokumen, 9 pt. */
  --text-cetak-label: 600 10px/13.333px var(--font-sans); /* Label kecil di atas isian dokumen, 7.5 pt, kapital. */
  --text-cetak-legal: 400 9.333px/12px var(--font-sans); /* Baris legal dan kaki dokumen, 7 pt. */
  --text-cetak-kode: 500 12px/16px var(--font-mono); /* Nomor dokumen, AWB, dan kode di dokumen cetak, 9 pt. */
}
.display-2xl {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 76px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.display-xl {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 60px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.display-lg {
  font-family: var(--font-sans);
  font-size: 44px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.heading-1 {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.heading-2 {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.heading-3 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.heading-4 {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.label-sm {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.button {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.overline {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.angka-xl {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.kode-lg {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0;
}
.kode {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
}
.kode-sm {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.cetak-judul {
  font-family: var(--font-sans);
  font-size: 21.333px;
  line-height: 26.667px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.cetak-subjudul {
  font-family: var(--font-sans);
  font-size: 14.667px;
  line-height: 18.667px;
  font-weight: 700;
  letter-spacing: 0;
}
.cetak-isi {
  font-family: var(--font-sans);
  font-size: 13.333px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.cetak-tabel {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.cetak-label {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 13.333px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.cetak-legal {
  font-family: var(--font-sans);
  font-size: 9.333px;
  line-height: 12px;
  font-weight: 400;
  letter-spacing: 0;
}
.cetak-kode {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}