/* ==========================================================================
   YASINDIGITAL — tokens.css
   Semua @font-face dan CSS custom properties (design tokens) dipusatkan
   di sini. JANGAN taruh style komponen apa pun di file ini — kalau butuh
   warna/spacing baru, tambahkan variabel di sini lalu pakai var(...) di
   base.css / components.css / responsive-*.css.
   ========================================================================== */

/* =========================
   FONTS
========================= */
@font-face {
    font-family: 'IsepMisbah';
    src: url('../fonts/LPMQ-IsepMisbah.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Thuluth';
    src: url('../fonts/A-Thuluth-Regular.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* =========================
   DESIGN TOKENS — LIGHT MODE (default)
========================= */
:root {
    /* Warna dasar */
    --bg-body: linear-gradient(to right, #1b4332, #009000, #1b4332); /* hijau pekat - hijau nu - hijau pekat */
    --bg-page: #ffffff;
    --text-primary: #1f2421;
    --text-secondary: #535855;
    --text-heading: #1b4332;
    --accent-color: #AA7C11;

    /* Masking pattern islami */
    --mask-pattern: url('../images/ornamen-yasin.svg');
    --pattern-opacity: 0.31;

    /* Ayat card */
    --card-border: rgba(200, 168, 92, 0.15);
    --card-bg-normal: linear-gradient(135deg, #ffffff 0%, #fdfcf9 100%);
    --card-bg-active: linear-gradient(135deg, #ffffff 0%, #fffdf0 100%);
    --card-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.02), 0 10px 25px rgba(200, 168, 92, 0.04);

    /* Active state */
    --active-border: rgba(200, 168, 92, 0.5);
    --active-shadow: 0 12px 30px rgba(200, 168, 92, 0.12);
    --active-shadow-hover: 0 16px 40px rgba(200, 168, 92, 0.18);

    /* --- BARU: Layout tokens (nilai default mobile; di-override di responsive-desktop.css) ---
       Didefinisikan di sini juga (bukan cuma di dalam @media desktop) supaya
       variabel ini tetap valid/terisi walau suatu saat dipakai di luar
       konteks desktop. */
    --page-max-width: 100%;
    --content-max-width: 100%;

    /* --- BARU: Tinggi footer, satu sumber kebenaran.
       Sebelumnya angka 89px/90px ditulis ulang di 4 tempat berbeda
       (global.css, mobile.css x2, desktop.css) dan sempat tidak sinkron
       (89px vs 90px). Sekarang cukup ubah di sini saja. --- */
    --footer-height: 89px;

    /* --- BARU: Skala z-index, biar tidak ada lagi angka ajaib (1000, 9999,
       99999, dst.) yang ditulis manual dan gampang tabrakan waktu nambah
       komponen baru. Urutan lapisan dari bawah ke atas: --- */
    --z-page: 1;
    --z-footer: 100;
    --z-floating-btn: 200;
    --z-modal: 900;
    --z-sheet-overlay: 950;
    --z-bottom-sheet: 960;
    --z-bio-backdrop: 990;
    --z-toast: 999;
}

/* =========================
   DESIGN TOKENS — DARK MODE
========================= */
[data-theme="dark"] {
    --bg-body: linear-gradient(to right, #AA7C11, #FFD700, #D4AF37);
    --bg-page: #131a16;
    --text-primary: #e3e8e5;
    --text-secondary: #adada3;
    --text-heading: #ecdcb9;
    --accent-color: #AA7C11;

    --pattern-opacity: 0.21;

    --card-border: rgba(255, 255, 255, 0.06);
    --card-bg-normal: linear-gradient(135deg, #1b4332 0%, #131a16 100%);
    --card-bg-active: linear-gradient(135deg, #222920 0%, #1b4332 100%);
    --card-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.3);

    --active-border: rgba(212, 175, 55, 0.5);
    --active-shadow: 0 12px 30px rgba(212, 175, 55, 0.1);
    --active-shadow-hover: 0 16px 40px rgba(212, 175, 55, 0.15);
}