/* v549: Sistem desain terpadu, TAHAP 2: token. Satu sumber untuk warna, huruf, jarak, sudut, bayangan.
   Semua bernama --ds-*; tidak ada selector halaman, jadi memasangnya tidak mengubah tampilan yang ada.
   Nilai diambil dari yang paling sering dipakai (lihat DESAIN-INVENTARIS.md). Gelap mengikuti html[data-tema="gelap"]. */
:root{
  /* warna merek */
  --ds-pink:#FF1D86; --ds-pink-dalam:#C00E6E; --ds-pink-cahaya:#FF8FD4; --ds-pink-muda:#FFD6EC; --ds-pink-tipis:#FFF1F8;
  --ds-emas:#FFC738; --ds-emas-dalam:#C98600;
  /* permukaan dan teks */
  --ds-latar:#FFF8F1; --ds-kertas:#FFFFFF; --ds-garis:#F3C9DE;
  --ds-teks:#2B1330; --ds-teks-redup:#5E4A63; --ds-teks-samar:#6D5873; --ds-teks-di-pink:#FFFFFF;
  /* v683 kontras (tahap 2): varian TEKS yang lulus 4,5:1 di atas latar mudanya (nilai di atas dipakai sebagai latar/garis/ikon, jangan dipakai sebagai teks kecil) */
  --ds-pink-tombol:#D10D70; --ds-bahaya-tombol:#B3142F; --ds-link:#B80D68;
  --ds-ok-teks:#0F6B3A; --ds-awas-teks:#7A5200; --ds-bahaya-teks:#B3142F; --ds-info-teks:#3A49D6; --ds-emas-teks:#7A5200;
  /* status */
  --ds-ok:#1E9E5A; --ds-ok-muda:#DDF5E8; --ds-awas:#C98600; --ds-awas-muda:#FFF1CC; --ds-bahaya:#D8294B; --ds-bahaya-muda:#FFE1E7; --ds-info:#5B6CFF; --ds-info-muda:#E6E9FF;
  /* huruf */
  --ds-huruf:'Plus Jakarta Sans',system-ui,sans-serif; --ds-huruf-judul:'Lilita One','Plus Jakarta Sans',sans-serif;
  --ds-t-xs:calc(11.5px*var(--sh,1)); --ds-t-sm:calc(12.5px*var(--sh,1)); --ds-t-md:calc(14px*var(--sh,1));
  --ds-t-lg:calc(16px*var(--sh,1)); --ds-t-xl:calc(20px*var(--sh,1)); --ds-t-2xl:calc(26px*var(--sh,1));
  --ds-tebal:600; --ds-tebal-judul:800; --ds-baris:1.45;
  /* jarak (skala 4) */
  --ds-j-1:4px; --ds-j-2:8px; --ds-j-3:12px; --ds-j-4:16px; --ds-j-5:24px; --ds-j-6:32px;
  /* sudut */
  --ds-s-kecil:10px; --ds-s-sedang:14px; --ds-s-besar:18px; --ds-s-bulat:999px;
  /* bayangan */
  --ds-by-1:0 1px 2px rgba(43,19,48,.05),0 6px 16px rgba(43,19,48,.06);
  --ds-by-2:0 8px 22px rgba(180,40,110,.12);
  --ds-by-3:0 -10px 30px rgba(43,19,48,.18);
  /* gerak dan fokus */
  --ds-gerak:.18s; --ds-ease:cubic-bezier(.22,1,.36,1); --ds-fokus:0 0 0 3px rgba(255,29,134,.35); --ds-tap:44px;
}
html[data-tema="gelap"]{
  --ds-link:#FF9AD8; --ds-ok-teks:#6EE0A0; --ds-awas-teks:#FFD76A; --ds-bahaya-teks:#FF9DB0; --ds-info-teks:#B7BFFF; --ds-emas-teks:#FFD76A;
  --ds-latar:#150C19; --ds-kertas:#241531; --ds-garis:rgba(255,143,212,.22);
  --ds-teks:#FFF7EE; --ds-teks-redup:#E4D3E8; --ds-teks-samar:#B9A3BF;
  --ds-pink-tipis:rgba(255,29,134,.12); --ds-pink-muda:rgba(255,29,134,.22);
  --ds-ok-muda:rgba(30,158,90,.2); --ds-awas-muda:rgba(255,199,56,.18); --ds-bahaya-muda:rgba(216,41,75,.22); --ds-info-muda:rgba(91,108,255,.22);
  --ds-by-1:0 1px 2px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.28); --ds-by-2:0 8px 22px rgba(0,0,0,.4); --ds-by-3:0 -10px 30px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion:reduce){:root{--ds-gerak:0s}}