/**
 * Nour Al-Bayan Interactive Platform - Central Design Tokens
 * Master variables for colors, dark mode surfaces, typography, and mathematical easings.
 */

:root {
    /* 1. Core Brand Colors (WCAG AAA Compliant) */
    --color-primary: #047857;
    --color-primary-light: #059669;
    --color-primary-dark: #065f46;
    --color-accent: #d97706;
    --color-accent-light: #f59e0b;
    --color-accent-dark: #b45309;
    --color-focus-ring: #047857;
    --color-bg: #fcfbf9;
    --color-bg-green: #f0fdf4;
    --color-quranic-red: #b91c1c;
    --color-quranic-blue: #1d4ed8;

    /* 2. Semantic Surface & Text Design Tokens */
    --surface-page: #f8fafc;
    --surface-card: #ffffff;
    --text-main: #0f172a;
    --text-muted: #475569;
    --border-color: #e2e8f0;

    /* 3. Aliases & Component Compatibility Tokens */
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-light);
    --primary-light: #ecfdf5;
    --accent: var(--color-accent);
    --bg: var(--surface-page);
    --card-bg: var(--surface-card);

    /* 4. Typography & Quranic Font Tokens */
    --font-sans: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-quran: 'Amiri', 'Amiri Quran', 'Scheherazade New', 'Traditional Arabic', serif;
    --font-scale-factor: 1;

    /* 5. Responsive Multipliers & Layout */
    --app-height: 100%;

    /* 6. Mathematical Motion Easings (Hardware-Accelerated) */
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-tactile: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark Mode Tokens */
@media (prefers-color-scheme: dark) {
    :root {
        --surface-page: #0f172a;
        --surface-card: #1e293b;
        --text-main: #f8fafc;
        --text-muted: #94a3b8;
        --border-color: #334155;
        --color-bg: #0f172a;
        --color-bg-green: #064e3b;
        --primary-light: rgba(4, 120, 87, 0.2);
        --card-bg: #1e293b;
        --bg: #0f172a;
    }
}

/* Dynamic Font Scaling Modes */
html.font-scale-normal { --font-scale-factor: 1; }
html.font-scale-large  { --font-scale-factor: 1.22; }
html.font-scale-xlarge { --font-scale-factor: 1.45; }