/* SALINAN — sumber kebenaran: tilaqa-hifz-product-package/design/tokens.css (sinkronkan manual saat berubah) */
/* ============================================================
   Tilaqa Hifz — Design Tokens v0.1
   Sumber kebenaran tunggal untuk warna, tipografi, ruang, radius,
   bayangan, dan gerak. Light = "Kertas Mushaf", Dark = "Malam Mihrab".
   ============================================================ */

:root {
  /* ---- Warna inti (light: Kertas Mushaf) ---- */
  --bg: #F7F4EC;            /* latar utama — krem kertas */
  --surface: #FFFDF6;       /* kartu / permukaan terangkat */
  --surface-2: #F1ECDF;     /* permukaan tenggelam (input, track) */
  --line: #E4DDCB;          /* garis pemisah */
  --ink: #221E18;           /* teks utama (hitam hangat) */
  --ink-muted: #6E6759;     /* teks sekunder */
  --ink-faint: #A69E8E;     /* teks nonaktif / placeholder */

  /* ---- Hijau Mihrab (brand primer) ---- */
  --green-900: #0F3B27;
  --green-700: #17573B;     /* teks/isi brand di atas terang */
  --green-600: #1D6B48;     /* aksi utama */
  --green-500: #268759;
  --green-200: #BCDCCA;
  --green-100: #DCEDE2;
  --green-50:  #EFF7F1;

  /* ---- Emas Tazhib (aksen — ornamen & momen pencapaian) ---- */
  --gold-700: #8C6825;
  --gold-600: #A87E2F;      /* teks emas terkecil yang boleh dipakai (>=18px semibold) */
  --gold-500: #C09A45;
  --gold-300: #DCC489;
  --gold-100: #F3E9CF;

  /* ---- Semantik status bacaan (teruji di spike) ---- */
  --benar: var(--green-600);
  --benar-bg: var(--green-100);
  --terlewat: #A05205;      /* kata tidak dikredit */
  --terlewat-bg: #FBEED4;
  --berbeda: #A63446;       /* terdengar berbeda */
  --berbeda-bg: #F9E3E6;
  --murajaah: #2B6E8F;      /* pengulangan — netral, bukan salah */
  --murajaah-bg: #E0F0F7;

  /* ---- Tipografi ---- */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mushaf: "KFGQPC Uthmanic Script HAFS", "Scheherazade New", "Amiri Quran", serif;
  --font-arab-ui: "Noto Naskh Arabic", "Scheherazade New", serif;

  --text-caption: 0.75rem;   /* 12 */
  --text-body-s: 0.875rem;   /* 14 */
  --text-body: 1rem;         /* 16 */
  --text-title-s: 1.125rem;  /* 18 */
  --text-title: 1.375rem;    /* 22 */
  --text-display-s: 1.75rem; /* 28 */
  --text-display: 2.125rem;  /* 34 */
  /* Mushaf: 3 ukuran baca, line-height longgar utk harakat */
  --mushaf-s: 1.5rem;  --mushaf-m: 1.875rem;  --mushaf-l: 2.25rem;
  --mushaf-leading: 2.3;

  /* ---- Ruang (basis 4px) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Radius ---- */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px; --r-pill: 999px;

  /* ---- Bayangan (hangat, lembut) ---- */
  --shadow-1: 0 1px 3px rgba(34, 30, 24, .07);
  --shadow-2: 0 6px 20px rgba(34, 30, 24, .08);

  /* ---- Gerak ---- */
  --dur-1: 120ms;  /* micro: hover, toggle */
  --dur-2: 200ms;  /* state kata, pill */
  --dur-3: 320ms;  /* panel, halaman */
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* ---- Fokus & sentuh ---- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-500);
  --hit-min: 44px;
}

/* ---- Dark: Malam Mihrab ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131A15;
    --surface: #1B231D;
    --surface-2: #212B24;
    --line: #2C382F;
    --ink: #F1EDE1;
    --ink-muted: #A9A292;
    --ink-faint: #6F6A5C;

    --green-600: #3FA274;
    --green-700: #57B78A;
    --green-100: #1E3A2B;
    --green-50: #18291F;

    --gold-600: #D9B96A;
    --gold-500: #C9A653;
    --gold-100: #33301F;

    --benar: #4CB584;      --benar-bg: #1C3A2A;
    --terlewat: #E0A050;   --terlewat-bg: #3A2C15;
    --berbeda: #E58296;    --berbeda-bg: #3D2127;
    --murajaah: #6FB4D4;   --murajaah-bg: #16303D;

    --shadow-1: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, .4);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-500);
  }
}
[data-theme="dark"] {
  --bg: #131A15; --surface: #1B231D; --surface-2: #212B24; --line: #2C382F;
  --ink: #F1EDE1; --ink-muted: #A9A292; --ink-faint: #6F6A5C;
  --green-600: #3FA274; --green-700: #57B78A; --green-100: #1E3A2B; --green-50: #18291F;
  --gold-600: #D9B96A; --gold-500: #C9A653; --gold-100: #33301F;
  --benar: #4CB584; --benar-bg: #1C3A2A;
  --terlewat: #E0A050; --terlewat-bg: #3A2C15;
  --berbeda: #E58296; --berbeda-bg: #3D2127;
  --murajaah: #6FB4D4; --murajaah-bg: #16303D;
  --shadow-1: 0 1px 3px rgba(0,0,0,.35); --shadow-2: 0 6px 20px rgba(0,0,0,.4);
}
[data-theme="light"] {
  --bg: #F7F4EC; --surface: #FFFDF6; --surface-2: #F1ECDF; --line: #E4DDCB;
  --ink: #221E18; --ink-muted: #6E6759; --ink-faint: #A69E8E;
  --green-600: #1D6B48; --green-700: #17573B; --green-100: #DCEDE2; --green-50: #EFF7F1;
  --gold-600: #A87E2F; --gold-500: #C09A45; --gold-100: #F3E9CF;
  --benar: #1D6B48; --benar-bg: #DCEDE2;
  --terlewat: #A05205; --terlewat-bg: #FBEED4;
  --berbeda: #A63446; --berbeda-bg: #F9E3E6;
  --murajaah: #2B6E8F; --murajaah-bg: #E0F0F7;
  --shadow-1: 0 1px 3px rgba(34,30,24,.07); --shadow-2: 0 6px 20px rgba(34,30,24,.08);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}