/* typography.css — Playfair Display (heading) + Inter (body). [01_WEBSITE — design-system]
   ── KEBIJAKAN TIPOGRAFI TUNGGAL (DITEGASKAN Batch 104, master 25 Agustus 2026) ──
   File CSS ini adalah SATU-SATUNYA sumber tipografi untuk SELURUH ekosistem PRIME EVERGREEN (website + Holder Dashboard).
   DILARANG KERAS: file typography terpisah, salinan file ini, @font-face/@import font lain, atau deklarasi font-family berbeda di
   folder mana pun — termasuk player\ dan player\dashboard-pages\ [L08]. Komponen cukup memakai var(--font-heading)/var(--font-body).
   Pilihan font TETAP Playfair Display + Inter (tidak boleh diganti).
   Dimuat oleh (diverifikasi B104 — sebelumnya TIDAK ada entry point yang memuatnya): index.html, pages\allowlist\allowlist.html,
   pages\legal\{terms,privacy,cookies}.html (sesudah tokens.css), theme-studio\theme-preview.html, dan player\music-player.html —
   entry point TUNGGAL Holder Dashboard (ke-13 halaman dashboard-pages\ dirender di dalamnya) — lewat /design-system/typography.css
   yang di host player disajikan dari berkas INI juga (nginx immersive-music-player.conf alias), bukan salinan.
   PENGECUALIAN TERDOKUMENTASI: offline.html (satu-satunya berkas pre-cache service worker, ditampilkan saat jaringan putus) tetap
   self-contained dengan stack fallback sistem yang sama dengan --font-body tanpa Inter — saat offline Google Fonts tak terjangkau.
   ── KEBIJAKAN FORMAT FONT ──
   Google Fonts CSS2 API dengan rentang sumbu (wght@100..900) → Google menyajikan VARIABLE FONT format woff2 ke browser modern;
   &display=swap → font-display: swap di setiap @font-face. DILARANG format lawas: eot, ttf/otf tanpa font-display: swap, bitmap. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Skala tipe — mobile dulu, membesar lewat clamp() */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: clamp(24px, 4vw, 32px);
  --text-3xl: clamp(28px, 5vw, 40px);
  --text-4xl: clamp(32px, 8vw, 56px);
  --leading-tight: 1.15;
  --leading-body: 1.6;
  --tracking-caps: 0.12em;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4, h5, h6 { font-family: var(--font-body); font-weight: 600; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.text-muted { color: var(--color-text-muted); }
.text-gold { color: var(--color-gold); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }

/* Teks Arab (ar-SA, RTL) — tetap pakai Inter/Playfair fallback sistem; angka & base58 selalu LTR */
[dir="rtl"] body { letter-spacing: 0; }
.ltr-isolate { direction: ltr; unicode-bidi: isolate; }