/**
 * CSS Variables
 * Centralized color and typography system for the project
 * 
 * Usage:
 * - Fonts: var(--font-primary), var(--font-serif), etc.
 * - Colors: var(--color-bg-primary), var(--color-text-primary), etc.
 * - Theme-aware: Colors automatically switch based on body.light-theme class
 */

/* ============================================
   TYPOGRAPHY VARIABLES
   ============================================ */

:root {
    /* Font Families */
    --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-serif: 'Instrument Serif', serif; /* Для EN и ES */
    --font-mono: 'Courier New', monospace;
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 48px;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;

    /* Legacy alias used by select/dropdown components */
    --line-height-md: var(--line-height-normal);

    /* ============================================
       DESIGN SYSTEM: FORM CONTROLS
       ============================================ */
    --control-height-md: 41px;
    --control-height-mobile: 42px;
    --control-radius-md: 12px;
    --control-padding-x: 14px;
    --control-date-icon-size: 18px;
    --control-date-icon-right: 8px;
    --dropdown-option-padding-y: 10px;
    --dropdown-option-padding-x: 14px;
    --dropdown-option-selected-padding-right: 36px;
    --dropdown-check-right: 14px;

    /* Checkbox: кастомный (label > input + span) и нативный (Financial Mirror) */
    --checkbox-control-size: 20px;
    --checkbox-control-radius: var(--radius-circle);
    --checkbox-control-border: 1px solid var(--color-border-secondary);
    --checkbox-control-bg: var(--color-bg-tertiary);
    --checkbox-control-bg-hover: var(--color-bg-secondary);
    --checkbox-control-bg-checked: var(--color-accent-primary);
    --checkbox-control-border-checked: var(--color-accent-primary);
    --checkbox-control-check: var(--color-text-inverse);
    --checkbox-control-focus: var(--color-button-primary-focus);
    --checkbox-control-label-inset: 28px;
    --checkbox-native-size: 18px;
    --checkbox-native-radius: 4px;

    /* Chat: потолок авто-роста textarea (px; читает text-input.ts через getComputedStyle) */
    --chat-input-textarea-max-height: 288px;
}

@media (max-width: 800px) {
    :root {
        --chat-input-textarea-max-height: 200px;
    }
}

/* Fallback for select components (keeps consistent line-height even if the file uses legacy ::root blocks). */
:root {
    --line-height-md: var(--line-height-normal, 1.4);
}

/* Для кириллицы (русская версия) используем Source Serif 4 вместо Instrument Serif */
html[lang="ru"] {
    --font-serif: 'Source Serif 4', serif;
}

/* ============================================
   COLOR VARIABLES - DARK THEME (Default)
   ============================================ */

:root {
    /* Background Colors */
    --color-bg-primary: #1A1A1A;
    --color-bg-secondary: #121212;
    --color-bg-tertiary: #272727;
    --color-bg-card: #1A1A1A;
    --color-bg-input: #232323;
    --color-bg-input-focus: #2a2a2a;
    --color-bg-modal: #121212;
    --color-bg-modal-light: #1A1A1A;
    --color-bg-button-container: #121212;
    --color-bg-result: #1A1A1A;
    
    /* Menu & Chat Backgrounds */
    --color-bg-menu: linear-gradient(180deg, #272727 0%, #1F1F1F 100%);
    /* Плавный градиент с минимальным контрастом для предотвращения артефактов */
    --color-bg-chat: linear-gradient(180deg, #272727 0%, #1F1F1F 100%);
    --color-bg-chat-input-area: linear-gradient(to top, rgba(18, 18, 18, 0.15) 0%, rgba(18, 18, 18, 0.08) 30%, rgba(18, 18, 18, 0) 100%);
    --color-bg-chat-minimized: #272727;
    
    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-tertiary: rgba(255, 255, 255, 0.5);
    --color-text-disabled: rgba(255, 255, 255, 0.4);
    --color-text-muted: rgba(255, 255, 255, 0.3);
    --color-text-inverse: #000000;
    
    /* Border Colors */
    --color-border-primary: rgba(93, 93, 93, 0.1);
    --color-border-secondary: rgba(255, 255, 255, 0.08);
    --color-border-tertiary: rgba(255, 255, 255, 0.05);
    --color-border-error: rgba(251, 146, 60, 0.3);
    
    /* Accent Colors */
    --color-accent-primary: #0E7C66;
    --color-accent-hover: #12A184;
    --color-accent-active: #0B614F;
    --color-accent-light: rgba(14, 124, 102, 0.6);
    
    /* Status Colors */
    --color-success: #0E7C66;
    --color-error: #fb923c;
    --color-warning: #ff9800;
    --color-info: #2196F3;
    
    /* Button Colors */
    --color-button-primary: #0E7C66;
    --color-button-primary-text: #FFFFFF;
    --color-button-primary-hover: #12A184;
    --color-button-primary-active: #0B614F;
    --color-button-primary-disabled: #1A332E;
    --color-button-primary-disabled-text: rgba(255, 255, 255, 0.45);
    --color-button-primary-focus: rgba(14, 124, 102, 0.6);
    --color-button-secondary: rgba(255, 255, 255, 0.05);
    --color-button-secondary-hover: rgba(255, 255, 255, 0.12);
    
    /* Input Colors */
    --color-input-bg: rgba(255, 255, 255, 0.04);
    --color-input-bg-hover: rgba(255, 255, 255, 0.06);
    --color-input-bg-focus: rgba(255, 255, 255, 0.08);
    --color-input-text: #ffffff;
    --color-input-placeholder: rgba(255, 255, 255, 0.3);
    --color-input-border: none;
    --color-input-border-focus: none;
    
    /* Logo Colors */
    --color-logo: #ffffff;
    --color-logo-inverse: #000000;
    
    /* Switch Colors */
    --color-switch-bg: #272727;
    --color-switch-slider: #ffffff;
    
    /* Overlay Colors */
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-strong: rgba(0, 0, 0, 0.8);
}

/* ============================================
   COLOR VARIABLES - LIGHT THEME
   ============================================ */

/* Tool pages ставят класс на <html>; без этого токены остаются тёмными. */
body.light-theme,
html.light,
html.light-theme {
    /* Background Colors */
    --color-bg-primary: rgb(248, 248, 248);
    --color-bg-secondary: rgb(255, 255, 255);
    --color-bg-tertiary: rgb(240, 240, 240);
    --color-bg-card: rgb(255, 255, 255);
    --color-bg-input: rgb(240, 240, 240);
    --color-bg-input-focus: rgb(232, 232, 232);
    --color-bg-modal: rgb(248, 248, 248);
    --color-bg-modal-light: rgb(255, 255, 255);
    --color-bg-button-container: rgb(248, 248, 248);
    --color-bg-result: rgb(248, 248, 248);
    
    /* Menu & Chat Backgrounds */
    --color-bg-menu: linear-gradient(180deg, #272727 0%, #1F1F1F 100%);
    --color-bg-chat: rgb(255, 255, 255);
    --color-bg-chat-input-area: linear-gradient(to top, #ffffff 0%, rgba(18, 18, 18, 0) 100%);
    --color-bg-chat-minimized: #ffffff;
    
    /* Text Colors */
    --color-text-primary: #000000;
    --color-text-secondary: rgba(0, 0, 0, 0.8);
    --color-text-tertiary: rgba(0, 0, 0, 0.6);
    --color-text-disabled: rgba(0, 0, 0, 0.4);
    --color-text-muted: rgba(0, 0, 0, 0.3);
    --color-text-inverse: #ffffff;
    
    /* Border Colors */
    --color-border-primary: rgba(0, 0, 0, 0.1);
    --color-border-secondary: rgba(0, 0, 0, 0.08);
    --color-border-tertiary: rgba(0, 0, 0, 0.05);
    --color-border-error: rgba(251, 146, 60, 0.5);
    --color-border-input-transparent: 1px solid transparent;
    --color-border-input-focus: 1px solid rgba(0, 0, 0, 0.1);
    
    /* Accent Colors (same as dark theme) */
    --color-accent-primary: #0E7C66;
    --color-accent-hover: #12A184;
    --color-accent-active: #0B614F;
    --color-accent-light: rgba(14, 124, 102, 0.6);
    
    /* Status Colors */
    --color-success: #0E7C66;
    --color-error: #ea580c;
    --color-warning: #ff9800;
    --color-info: #2196F3;
    
    /* Button Colors */
    --color-button-primary: #0E7C66;
    --color-button-primary-text: #FFFFFF;
    --color-button-primary-hover: #12A184;
    --color-button-primary-active: #0B614F;
    --color-button-primary-disabled: #1A332E;
    --color-button-primary-disabled-text: rgba(255, 255, 255, 0.45);
    --color-button-primary-focus: rgba(14, 124, 102, 0.6);
    --color-button-secondary: rgb(240, 240, 240);
    --color-button-secondary-hover: rgb(232, 232, 232);
    
    /* Input Colors */
    --color-input-bg: rgb(240, 240, 240);
    --color-input-bg-hover: rgb(232, 232, 232);
    --color-input-bg-focus: rgb(232, 232, 232);
    --color-input-text: #000000;
    --color-input-placeholder: rgba(0, 0, 0, 0.4);
    --color-input-border: 1px solid transparent;
    --color-input-border-focus: 1px solid rgba(0, 0, 0, 0.1);
    
    /* Logo Colors */
    --color-logo: #000000;
    --color-logo-inverse: #ffffff;
    
    /* Switch Colors */
    --color-switch-bg: #272727;
    --color-switch-slider: #ffffff;
    
    /* Overlay Colors */
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-strong: rgba(0, 0, 0, 0.8);
}

/* ============================================
   SPACING VARIABLES
   ============================================ */

:root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 28px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 56px;
    --spacing-8xl: 64px;
    --spacing-9xl: 72px;
    --spacing-10xl: 80px;
    --spacing-11xl: 88px;
    --spacing-12xl: 96px;
    --spacing-13xl: 104px;
    --spacing-14xl: 112px;
    --spacing-15xl: 120px;
    --spacing-16xl: 128px;
    --spacing-17xl: 136px;
    --spacing-18xl: 144px;
    --spacing-19xl: 152px;
    --spacing-20xl: 160px;
    --spacing-21xl: 168px;
    --spacing-22xl: 176px;
    --spacing-23xl: 184px;
    --spacing-24xl: 192px;
    --spacing-25xl: 200px;
    --spacing-26xl: 208px;
    --spacing-27xl: 216px;
    --spacing-28xl: 224px;
    --spacing-29xl: 232px;
    --spacing-30xl: 240px;
    --spacing-31xl: 248px;
    --spacing-32xl: 256px;
    --spacing-33xl: 264px;
    --spacing-34xl: 272px;
    --spacing-35xl: 280px;
    --spacing-36xl: 288px;
    --spacing-37xl: 296px;
    --spacing-38xl: 300px;
}

/* ============================================
   BORDER RADIUS VARIABLES
   ============================================ */

:root {
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-3xl: 32px;
    --radius-full: 9999px;
    --radius-circle: 50%;
    /* Левая навигация: крупные углы в духе iOS / островов Finance (vmin — без container query) */
    --nav-left-radius-outer: clamp(28px, 3.5vmin, 42px);
    --nav-left-radius-inset: clamp(18px, 2.4vmin, 28px);
}

/* ============================================
   TRANSITION VARIABLES
   ============================================ */

:root {
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.4s ease;
}

/* ============================================
   SHADOW VARIABLES
   ============================================ */

:root {
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.light-theme {
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Z-INDEX VARIABLES
   ============================================ */

:root {
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 10000;
    --z-modal: 10001;
    --z-tooltip: 20000;
    --z-max: 2147483647;
}