/* ========================================
   CSS VARIABLES — Kawn Ad-Din Design System
   ======================================== */

:root {
    /* Primary palette */
    --emerald: #059669;
    --emerald-dark: #047857;
    --emerald-light: #10b981;
    --emerald-50: #ecfdf5;
    --emerald-100: #d1fae5;
    
    /* Gold accent */
    --gold: #c5a059;
    --gold-light: #d4b96a;
    --gold-dark: #a8873d;
    
    /* Neutrals */
    --dark-gray: #1f2937;
    --medium-gray: #6b7280;
    --medium-gray-light: #d1d5db;
    --light-gray: #f3f4f6;
    --border-gray: #e5e7eb;
    --white: #ffffff;
    /* Цвет текста/иконок ПОВЕРХ акцентной заливки (--emerald и пр.).
       Всегда светлый, НЕ переопределяется тёмными темами — в отличие от --white,
       который в тёмных темах становится тёмным фоном поверхности. */
    --on-primary: #ffffff;
    --page-bg: #f0f2f0;
    
    /* Semantic */
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --success: #059669;
    --success-light: #ecfdf5;
    --info: #3b82f6;
    --info-light: #eff6ff;
    /* Янтарные плашки (меры/конвертер/скот в малии) и кремовый фон (такбиры календаря).
       Раньше использовались только через fallback — теперь определены и темизируются. */
    --amber-50: #fffbeb;
    --cream-bg: #f5f5f0;

    /* Fonts */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-arabic: 'Islamic Honorifics', 'Scheherazade New', 'Amiri', serif;
    /* Витринный арабский (лого, заголовки модулей, 28px+): Amiri первым —
       Scheherazade на крупных кеглях слишком тонок. Арабской вязи letter-spacing
       противопоказан всегда (разрывает соединения глифов). */
    --font-arabic-display: 'Amiri', 'Scheherazade New', serif;
    --font-urdu: 'Noto Nastaliq Urdu', 'Amiri', serif;

    /* Размер арабского шрифта (переопределяется через JS applyFontSize) */
    --arabic-font-size: 1.3rem;
    --arabic-line-height: 2.0;
    
    /* ============================================================
       СЕМАНТИЧЕСКИЙ СЛОЙ. Все значения — var()/color-mix-ссылки на базовые
       токены, которые темы переопределяют инлайном (см. js/theme-boot.js:
       --emerald*, --white, --dark-gray, --page-bg). Поэтому семантика
       автоматически живёт во всех 6 темах БЕЗ отдельных night-праvil.
       Новый код пишем ТОЛЬКО на этих токенах; старые имена — легаси-база.
       ============================================================ */

    /* Поверхности: страница → карточка → приподнятая/альтернативная */
    --surface-0: var(--page-bg);
    --surface-1: var(--white);
    --surface-2: color-mix(in srgb, var(--white) 94%, var(--dark-gray));

    /* Текст: основной → вторичный → приглушённый.
       color-mix от пары текст/фон даёт корректные ступени в тёмных темах. */
    --text-1: var(--dark-gray);
    --text-2: color-mix(in srgb, var(--dark-gray) 72%, var(--white));
    --text-3: color-mix(in srgb, var(--dark-gray) 52%, var(--white));

    /* Бордеры */
    --border-subtle: color-mix(in srgb, var(--dark-gray) 12%, var(--white));
    --border-strong: color-mix(in srgb, var(--dark-gray) 26%, var(--white));

    /* Акцент */
    --accent: var(--emerald);
    --accent-soft: var(--emerald-50);
    --on-accent: var(--on-primary);

    /* Фокус и акцентные свечения — ЕДИНСТВЕННЫЙ источник для focus/hover-колец
       (вместо разбросанных rgba(5,150,105,…), которые не перекрашивались темами) */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--emerald) 18%, transparent);
    --accent-glow: 0 4px 12px color-mix(in srgb, var(--emerald) 30%, transparent);

    /* Оверлей межстраничного перехода: глубокая версия акцента темы
       (для emerald ≈ прежний #0b3b2e, для dawn — глубокий бордо и т.д.) */
    --page-transition-bg: color-mix(in srgb, var(--emerald-dark) 55%, black);

    /* Shadows (акцентная --shadow-lg перекрашивается темой через color-mix) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 40px color-mix(in srgb, var(--emerald) 18%, transparent);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
    --shadow-modal: 0 25px 80px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Токены движения (для новых анимаций; легаси transitions выше) */
    --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-1: 0.12s;
    --duration-2: 0.22s;
    --duration-3: 0.4s;

    /* Типографская шкала (fluid, clamp) — для нового кода и постепенной миграции */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --text-xl: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-3xl: clamp(2rem, 1.6rem + 2vw, 3rem);
    /* Интерлиньяж по письменностям: арабице нужен заметно больший */
    --leading-latin: 1.6;
    --leading-arabic: 2;
    --leading-display: 1.15;

    /* Шкала отступов (4px-сетка) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    
    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Z-index scale */
    --z-dropdown: 100;
    --z-modal-overlay: 500;
    --z-modal: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-transition: 9999;
}