/* Design tokens (design.md §2). Font di-host sendiri agar tetap tampil saat offline. */

@font-face { font-family: 'Rubik'; font-weight: 700; font-display: block; src: url('/fonts/rubik-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-weight: 800; font-display: block; src: url('/fonts/rubik-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url('/fonts/open-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-style: italic; font-display: swap; src: url('/fonts/open-sans-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 800; font-style: italic; font-display: swap; src: url('/fonts/open-sans-latin-800-italic.woff2') format('woff2'); }
@font-face { font-family: 'Amiri'; font-weight: 400; font-display: swap; src: url('/fonts/amiri-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Amiri'; font-weight: 700; font-display: swap; src: url('/fonts/amiri-arabic-700-normal.woff2') format('woff2'); }

:root {
  --bg: #14171f;
  --surface: #1e222c;
  --surface-2: #262b37;
  --border: #2e3441;
  --text: #ecedef;
  --text-muted: #8a90a0;
  --primary: #4e8a5e;
  --primary-strong: #3f7a4f;
  --accent: #d8a93b;
  --danger: #d2564b;
  --slide-bg: #ffffff;
  --on-primary: #ffffff;
  --on-accent: #1a1a1a;

  --radius: 14px;
  --radius-sm: 10px;

  --font-num: 'Rubik', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-quote: 'Open Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-arab: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
}

/* ---------- Tema layar TV (dipilih di Admin › Tampilan) ---------- */

/* Zamrud: hijau tua pekat + emas */
[data-theme='zamrud'] {
  --bg: #0b1a16;
  --surface: #11241e;
  --surface-2: #173028;
  --border: #22403a;
  --text: #eef4f0;
  --text-muted: #8fa89d;
  --primary: #2a8a60;
  --primary-strong: #237552;
  --accent: #e2b54e;
  --danger: #e0685c;
}

/* Biru Malam: biru dongker + emas */
[data-theme='biru'] {
  --bg: #0d1322;
  --surface: #141c33;
  --surface-2: #1b2540;
  --border: #283454;
  --text: #eef1f8;
  --text-muted: #8f9bb8;
  --primary: #2f6db0;
  --primary-strong: #285e98;
  --accent: #e0b252;
  --danger: #e2685d;
}

/* Kayu Jati: cokelat hangat + emas muda */
[data-theme='jati'] {
  --bg: #16110d;
  --surface: #211913;
  --surface-2: #2a2019;
  --border: #3a2d23;
  --text: #f5eee5;
  --text-muted: #ab9c8c;
  --primary: #8a5a2b;
  --primary-strong: #764c24;
  --accent: #e8b862;
  --danger: #e0685c;
}

/* Terang Sage: krem kehijauan lembut + hijau tua & emas tua (kontras tinggi) */
[data-theme='terang'] {
  --bg: #eceee8;
  --surface: #fbfcf9;
  --surface-2: #e3e7df;
  --border: #d0d7cc;
  --text: #16221c;
  --text-muted: #56655d;
  --primary: #2c6a4d;
  --primary-strong: #245a41;
  --accent: #9a6a12;
  --on-accent: #ffffff;
  --danger: #b3392f;
}

/* Logo kaligrafi Al-Ikhlas sebagai mask: warnanya mengikuti currentColor sehingga senada dengan tema */
.brand-mark {
  display: inline-block;
  aspect-ratio: 813 / 367;
  background: currentColor;
  -webkit-mask: url('/img/logo-mark.png') center / contain no-repeat;
  mask: url('/img/logo-mark.png') center / contain no-repeat;
  flex: none;
  vertical-align: middle;
}