/* ==========================================================================
   مركز الفردوس — طبقة المتغيرات (نظام "الكوفي المربّع")
   المصدر الوحيد للألوان والخطوط والاستدارات والمسافات في الواجهة الأمامية.
   المرجع: DESIGN.md في جذر المشروع. لا تضف لونًا جديدًا في أي ملف آخر.
   ========================================================================== */

/* ============ الخطوط ============ */
@font-face {
    font-family: 'Reem Kufi';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../webfonts/reem-kufi-arabic-var.woff2') format('woff2');
    /* digits excluded on purpose: Reem Kufi's 0 reads like ٥, so numbers fall back to Cairo */
    unicode-range: U+0600-065F, U+066A-06EF, U+06FA-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Reem Kufi';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../webfonts/reem-kufi-latin-var.woff2') format('woff2');
    unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../webfonts/cairo-var.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../webfonts/cairo-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../webfonts/amiri-400.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../webfonts/amiri-700.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
    /* ---------- الأخضر (المسرح) ---------- */
    --c-teal-950: #072B25;
    --c-teal-900: #0A3D35;
    --c-teal-800: #0E5145;
    --c-teal-700: #0E6B5C;
    --c-teal-500: #178474;
    --c-teal-300: #8FB3A9;
    --c-teal-100: #E7F0ED;
    --c-teal-50: #F2F7F5;

    /* ---------- البرتقالي (من الشعار) ---------- */
    --c-orange: #F0964E;
    --c-orange-soft: #F6B27A;
    --c-orange-edge: #B86A2C;
    --c-orange-ink: #A8541C;
    --c-orange-100: #FCE3CB;
    --c-orange-50: #FFF0DF;

    /* ---------- الورقي والحبر ---------- */
    --c-cream: #F0EADE;
    --c-paper: #F6F1E4;
    --c-paper-raised: #FBF8F2;
    --c-white: #FFFFFF;
    --c-line: #DED5C2;
    --c-line-soft: #ECE5D6;
    --c-ink: #1B332E;
    --c-ink-soft: #4B5F58;
    --c-ink-muted: #5E6E68;
    --c-ink-faint: #9AA3A0;
    --c-on-teal-soft: #A9C4BC;

    /* ---------- التغذية الراجعة (سجل الأطفال) ---------- */
    --c-correct: #1B7F4F;
    --c-correct-deep: #0F5534;
    --c-correct-100: #DDF0E5;
    --c-wrong: #B8362A;
    --c-wrong-deep: #7C2119;
    --c-wrong-100: #F8E1DD;
    --c-hint: #E8B04A;
    --c-hint-deep: #A87A1E;
    --c-hint-100: #FBEFD3;
    --c-sky: #2F6F99;
    --c-sky-deep: #1F4D6B;
    --c-sky-100: #DDEBF3;

    /* ---------- ألوان التجويد (محجوزة لتعليم الأحكام فقط) ---------- */
    --tj-ghunnah: #169B62;
    --tj-madd-lazim: #A01C1C;
    --tj-madd-wajib: #D6301E;
    --tj-madd-jaiz: #E8742C;
    --tj-madd-tabii: #C9912A;
    --tj-tafkhim: #1F3F8F;
    --tj-qalqalah: #2E9BD6;
    --tj-silent: #9AA3A0;

    /* ---------- الخطوط ---------- */
    --font-kufi: 'Reem Kufi', 'Cairo', Tahoma, sans-serif;
    --font-ui: 'Cairo', Tahoma, system-ui, sans-serif;
    --font-quran: 'Amiri Quran', 'Amiri', 'Traditional Arabic', serif;
    --font-matn: 'Amiri', 'Traditional Arabic', serif;

    /* ---------- الاستدارات (الزاوية الكوفية) ---------- */
    --r-cell: 6px;
    --r-block: 10px;
    --r-tile: 16px;

    /* ---------- المسافات (وحدة 8px) ---------- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-6: 24px;
    --s-8: 32px;
    --s-12: 48px;
    --s-16: 64px;
    --s-24: 96px;

    /* ---------- العمق ---------- */
    --shadow-card: 0 1px 2px rgba(7, 43, 37, .04), 0 12px 28px -14px rgba(7, 43, 37, .22);
    --shadow-card-hover: 0 1px 2px rgba(7, 43, 37, .05), 0 22px 40px -16px rgba(7, 43, 37, .28);
    --shadow-float: 0 18px 48px rgba(7, 43, 37, .16);
    --focus-ring: 0 0 0 3px var(--c-orange-soft);

    --ease: cubic-bezier(.22, .9, .32, 1);

    /* ==========================================================
       أسماء قديمة تبقى تعمل وتشير إلى النظام الجديد.
       لا تستخدمها في كود جديد.
       ========================================================== */
    --paper: var(--c-paper);
    --paper-raised: var(--c-paper-raised);
    --white: var(--c-white);
    --ink: var(--c-ink);
    --ink-soft: var(--c-ink-soft);
    --ink-deep: var(--c-teal-950);
    --teal: var(--c-teal-700);
    --teal-deep: var(--c-teal-900);
    --amber: var(--c-orange-ink);
    --amber-bright: var(--c-orange);
    --gold: var(--c-orange-ink);
    --hairline: rgba(27, 51, 46, 0.14);
    --card-shadow: var(--shadow-card);
    --card-shadow-hover: var(--shadow-card-hover);
    --mark-madd: var(--c-wrong);
    --mark-ghunnah: var(--c-teal-700);
    --mark-qalb: var(--c-sky);
    --radius: var(--r-tile);

    --fd-paper: var(--c-paper);
    --fd-paper-raised: var(--c-paper-raised);
    --fd-white: var(--c-white);
    --fd-ink: var(--c-ink);
    --fd-ink-soft: var(--c-ink-soft);
    --fd-teal: var(--c-teal-700);
    --fd-teal-deep: var(--c-teal-900);
    --fd-teal-bright: var(--c-teal-500);
    --fd-amber: var(--c-orange-ink);
    --fd-amber-bright: var(--c-orange);
    --fd-gold: var(--c-orange-ink);
    --fd-line: var(--c-line);
    --fd-success: var(--c-correct);
    --fd-danger: var(--c-wrong);
    --fd-focus: var(--c-orange);
    --fd-shadow: var(--shadow-float);
}

/* تكبير للبروجكتر: يُفعَّل بـ data-stage="projector" على html */
html[data-stage="projector"] {
    font-size: 125%;
}

html[data-stage="projector"] body {
    font-weight: 600;
}

html[data-stage="projector"] :focus-visible {
    outline-width: 4px !important;
}