/* Al-Hadi Design System — tokens.css (dijana dari tokens.json) */
/* Tema cerah = lalai. Tema gelap: <html data-theme="malam"> */
:root, [data-theme="siang"] {
  --kertas-50: #fbf6ee;
  --kertas-100: #f4eadb;
  --kertas-200: #eadbc2;
  --kad: #fffdf9;
  --garis: #e6d8c1;
  --garis-kuat: #a88a5c;
  --dakwat: #2a1e14;
  --dakwat-lembut: #66523f;
  --emas: #86601e;
  --on-emas: #fff8ec;
  --emas-terang: #c9a25a;
  --emas-pucat: #f1e2bf;
  --zamrud: #1e6b64;
  --zamrud-pucat: #dcebe6;
  --malam: #24180f;
  --malam-2: #35271a;
  --garis-malam: #4d3a28;
  --teks-malam: #f5ebdd;
  --teks-malam-lembut: #cdb99c;
  --fokus: #1e6b64;
  --fokus-malam: #e6c47e;
  --jaya: #2f6b3a;
  --bahaya: #a13d2d;
  --bayang-lembut: 0 1px 2px rgba(42,30,20,0.06), 0 8px 24px rgba(42,30,20,0.06);
  --bayang-angkat: 0 2px 4px rgba(42,30,20,0.08), 0 20px 48px rgba(42,30,20,0.12);
  --cahaya-emas: 0 0 0 1px rgba(201,162,90,0.35), 0 12px 40px rgba(201,162,90,0.35);
}
[data-theme="malam"] {
  --kertas-50: #17110b;
  --kertas-100: #1f170f;
  --kertas-200: #2a1f15;
  --kad: #241a11;
  --garis: #3a2c1e;
  --garis-kuat: #8a7150;
  --dakwat: #f4eadb;
  --dakwat-lembut: #c2ac8d;
  --emas: #d9b266;
  --on-emas: #24180f;
  --emas-terang: #e6c47e;
  --emas-pucat: #4a3820;
  --zamrud: #6cbdb0;
  --zamrud-pucat: #173330;
  --malam: #0e0905;
  --malam-2: #2b2016;
  --garis-malam: #45351f;
  --teks-malam: #f5ebdd;
  --teks-malam-lembut: #cdb99c;
  --fokus: #e6c47e;
  --fokus-malam: #e6c47e;
  --jaya: #7cc08a;
  --bahaya: #ef9a86;
  --bayang-lembut: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  --bayang-angkat: 0 2px 4px rgba(0,0,0,0.5), 0 20px 48px rgba(0,0,0,0.45);
  --cahaya-emas: 0 0 0 1px rgba(230,196,126,0.35), 0 12px 40px rgba(230,196,126,0.25);
}
:root {
  --ruang-1: 4px;
  --ruang-2: 8px;
  --ruang-3: 12px;
  --ruang-4: 16px;
  --ruang-6: 24px;
  --ruang-8: 32px;
  --ruang-12: 48px;
  --ruang-16: 64px;
  --ruang-24: 96px;
  --ruang-32: 128px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pil: 999px;
  --dur-cepat: 160ms;
  --dur-sederhana: 320ms;
  --dur-perlahan: 640ms;
  --dur-nafas: 1200ms;
  --stagger: 80ms;
  --ease-keluar: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-lembut: cubic-bezier(0.65, 0, 0.35, 1);
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-arab: "Amiri", "Amiri Quran", "Noto Naskh Arabic", serif;
  --font-kufi: "Reem Kufi", "Amiri", sans-serif;
}
/* Gaya tipografi */
.paparan-xl { font-family: var(--font-serif); font-size: 72px; line-height: 76px; font-weight: 600; letter-spacing: -0.01em; }
.paparan-l { font-family: var(--font-serif); font-size: 52px; line-height: 58px; font-weight: 600; }
.tajuk-3 { font-family: var(--font-serif); font-size: 32px; line-height: 38px; font-weight: 600; }
.tajuk-4 { font-family: var(--font-serif); font-size: 24px; line-height: 30px; font-weight: 600; }
.harga { font-family: var(--font-serif); font-size: 40px; line-height: 44px; font-weight: 600; }
.petikan { font-family: var(--font-serif); font-size: 22px; line-height: 34px; font-weight: 500; font-style: italic; }
.pendahuluan { font-family: var(--font-sans); font-size: 19px; line-height: 30px; font-weight: 400; }
.badan { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.badan-kecil { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.16em; }
.butang { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0.04em; }
.lencana { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; }
.ayat-xl { font-family: var(--font-arab); font-size: 48px; line-height: 1.9; font-weight: 400; }
.ayat { font-family: var(--font-arab); font-size: 30px; line-height: 1.9; font-weight: 400; }
.label-kufi { font-family: var(--font-kufi); font-size: 20px; line-height: 1.4; font-weight: 500; }
.eyebrow { text-transform: uppercase; }
.paparan-xl, .paparan-l, .tajuk-3, .tajuk-4, .harga { font-variant-numeric: lining-nums; }
@media (max-width: 640px) { .paparan-xl { font-size: 44px; line-height: 48px; } .paparan-l { font-size: 36px; line-height: 42px; } }