/* CSS Variables — Design System */

/* Дублируем декларацию из <meta name="color-scheme">: говорим вебвью
   (особенно Android-WebView мобильного Max), что страница сама управляет
   тёмной/светлой темой и Auto Dark не нужен. Без этого WebView применяет
   свою цветокоррекцию к <img>-элементам и логотип «выгорает». */
:root { color-scheme: light dark; }

:root {
    /* Colors - Primary */
    --primary-color: #007AFF;
    --primary-hover: #0066DD;
    --primary-light: #EBF5FF;
    --primary-gradient: linear-gradient(135deg, #007AFF 0%, #0055CC 100%);

    /* Colors - Semantic */
    --success-color: #34C759;
    --success-light: #E8F5E9;
    --error-color: #FF3B30;
    --error-light: #FFF2F1;
    --warning-color: #FF9500;
    --warning-light: #FFF8EC;

    /* Colors - Neutral (Light Theme) */
    --bg-color: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F0F1F3;
    --text-color: #1C1C1E;
    --text-secondary: #8E8E93;
    --text-tertiary: #AEAEB2;
    --border-color: #E5E5EA;
    --divider-color: #F2F2F7;

    /* Shadows */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-elevated: 0 8px 28px rgba(0, 0, 0, 0.12);
    --shadow-color: rgba(0, 0, 0, 0.08);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Fonts */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 17px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-2xl: 34px;

    /* Z-index */
    --z-header: 500;
    --z-bottom-nav: 500;
    --z-modal: 1000;
    --z-tooltip: 2000;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Bottom nav height */
    --bottom-nav-height: 56px;

    /* Совместимые алиасы — встречаются в модулях наряду с -color */
    --bg-primary: var(--bg-color);
    --text-primary: var(--text-color);
    --card-bg: var(--bg-color);
}

/* Dark Theme */
[data-theme="dark"],
.theme-dark {
    --bg-color: #1C1C1E;          /* было #000000 — слишком чёрный фон даёт нечитаемые карточки */
    --bg-secondary: #2C2C2E;
    --bg-tertiary: #3A3A3C;
    --text-color: #FFFFFF;
    --text-secondary: #98989D;
    --text-tertiary: #636366;
    --border-color: #38383A;
    --divider-color: #38383A;     /* было #1C1C1E — сливалось с фоном */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 8px 28px rgba(0, 0, 0, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.4);

    /* В тёмной теме *-light переменные становятся полупрозрачными подложками
       соответствующего цвета — чтобы текст по умолчанию (белый) оставался читаем,
       а фон не был светло-кремовым/салатовым на тёмной странице. */
    --primary-light: rgba(0, 122, 255, 0.18);
    --warning-light: rgba(255, 149, 0, 0.18);
    --success-light: rgba(52, 199, 89, 0.18);
    --error-light:   rgba(255, 59, 48, 0.18);

    /* Тёмная тема: карточки чуть светлее основного фона, чтобы выделяться */
    --bg-primary: #2C2C2E;
    --text-primary: var(--text-color);
    --card-bg: #2C2C2E;
}