/* DIBANGKITKAN dari otonom/desain/token.json oleh otonom/desain/kompilasi.py — jangan diedit langsung. */
:root {
  --warna-kanvas: #EDF0F7;
  --warna-latar-1: #D8D3F6;
  --warna-latar-2: #CDEEE2;
  --warna-latar-3: #CFE2F8;
  --warna-latar-4: #F3E9C3;
  --warna-kaca: rgba(255,255,255,0.62);
  --warna-kaca-kuat: rgba(255,255,255,0.84);
  --warna-garis-dalam: rgba(255,255,255,0.70);
  --warna-garis: rgba(27,33,48,0.10);
  --warna-tinta: #1B2130;
  --warna-tinta-2: #434D63;
  --warna-tinta-3: #56607A;
  --warna-aksen: #4B4BC4;
  --warna-aksen-tinta: #FFFFFF;
  --warna-aksen-lembut: #E3E2FB;
  --warna-r0: #1F7253;
  --warna-r0-latar: #D6F1E5;
  --warna-r1: #285E9A;
  --warna-r1-latar: #DAE8F8;
  --warna-r2: #7A5300;
  --warna-r2-latar: #F7EAC4;
  --warna-r3: #9E3550;
  --warna-r3-latar: #F8DBE2;
  --warna-r4: #4A5265;
  --warna-r4-latar: #E2E5ED;
  --efek-kaca-saring: blur(24px) saturate(180%);
  --efek-garis-dalam: inset 0 0 0 1px var(--warna-garis-dalam), inset 0 1px 0 rgba(255,255,255,0.45);
  --efek-bayang-1: 0 1px 1px rgba(16,20,30,0.04), 0 2px 6px rgba(16,20,30,0.06), 0 12px 32px rgba(16,20,30,0.08);
  --efek-bayang-2: 0 1px 2px rgba(16,20,30,0.06), 0 8px 24px rgba(16,20,30,0.10), 0 32px 72px rgba(16,20,30,0.16);
  --radius-kecil: 8px;
  --radius-sedang: 14px;
  --radius-besar: 22px;
  --radius-pil: 999px;
  --ruang-1: 4px;
  --ruang-2: 8px;
  --ruang-3: 12px;
  --ruang-4: 16px;
  --ruang-5: 24px;
  --ruang-6: 32px;
  --ruang-7: 48px;
  --gerak-pegas: cubic-bezier(0.22, 1, 0.36, 1);
  --gerak-cepat: 160ms;
  --gerak-sedang: 320ms;
  --gerak-lambat: 520ms;
  --huruf-keluarga: system-ui, -apple-system, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Helvetica Neue", "Arial", sans-serif;
  --huruf-mono: ui-monospace, "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
  --huruf-ukuran-mikro: 11px;
  --huruf-ukuran-kecil: 12px;
  --huruf-ukuran-isi: 13px;
  --huruf-ukuran-sedang: 15px;
  --huruf-ukuran-besar: 17px;
  --huruf-ukuran-judul: 22px;
  --huruf-ukuran-angka: 28px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --warna-kanvas: #10131B;
    --warna-latar-1: #2A2552;
    --warna-latar-2: #153A31;
    --warna-latar-3: #172E4B;
    --warna-latar-4: #36311A;
    --warna-kaca: rgba(28,32,44,0.60);
    --warna-kaca-kuat: rgba(32,37,51,0.86);
    --warna-garis-dalam: rgba(255,255,255,0.10);
    --warna-garis: rgba(255,255,255,0.09);
    --warna-tinta: #E9EDF6;
    --warna-tinta-2: #B9C2D4;
    --warna-tinta-3: #97A1B6;
    --warna-aksen: #ABAAFF;
    --warna-aksen-tinta: #15133C;
    --warna-aksen-lembut: #2D2B62;
    --warna-r0: #8FE0BD;
    --warna-r0-latar: #163A2E;
    --warna-r1: #9CC7F5;
    --warna-r1-latar: #17304D;
    --warna-r2: #F0D08A;
    --warna-r2-latar: #3D3112;
    --warna-r3: #F5A9BB;
    --warna-r3-latar: #45202A;
    --warna-r4: #C3C9D8;
    --warna-r4-latar: #2A2F3C;
    --efek-garis-dalam: inset 0 0 0 1px var(--warna-garis-dalam), inset 0 1px 0 rgba(255,255,255,0.06);
    --efek-bayang-1: 0 1px 1px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.28), 0 12px 32px rgba(0,0,0,0.34);
    --efek-bayang-2: 0 1px 2px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.40), 0 32px 72px rgba(0,0,0,0.50);
  }
}
:root[data-tema="gelap"] {
  --warna-kanvas: #10131B;
  --warna-latar-1: #2A2552;
  --warna-latar-2: #153A31;
  --warna-latar-3: #172E4B;
  --warna-latar-4: #36311A;
  --warna-kaca: rgba(28,32,44,0.60);
  --warna-kaca-kuat: rgba(32,37,51,0.86);
  --warna-garis-dalam: rgba(255,255,255,0.10);
  --warna-garis: rgba(255,255,255,0.09);
  --warna-tinta: #E9EDF6;
  --warna-tinta-2: #B9C2D4;
  --warna-tinta-3: #97A1B6;
  --warna-aksen: #ABAAFF;
  --warna-aksen-tinta: #15133C;
  --warna-aksen-lembut: #2D2B62;
  --warna-r0: #8FE0BD;
  --warna-r0-latar: #163A2E;
  --warna-r1: #9CC7F5;
  --warna-r1-latar: #17304D;
  --warna-r2: #F0D08A;
  --warna-r2-latar: #3D3112;
  --warna-r3: #F5A9BB;
  --warna-r3-latar: #45202A;
  --warna-r4: #C3C9D8;
  --warna-r4-latar: #2A2F3C;
  --efek-garis-dalam: inset 0 0 0 1px var(--warna-garis-dalam), inset 0 1px 0 rgba(255,255,255,0.06);
  --efek-bayang-1: 0 1px 1px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.28), 0 12px 32px rgba(0,0,0,0.34);
  --efek-bayang-2: 0 1px 2px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.40), 0 32px 72px rgba(0,0,0,0.50);
}
@media (prefers-reduced-motion: reduce) {
  :root { --gerak-cepat: 0ms; --gerak-sedang: 0ms; --gerak-lambat: 0ms; }
}
:root[data-gerak="kurang"] { --gerak-cepat: 0ms; --gerak-sedang: 0ms; --gerak-lambat: 0ms; }