/**
 * 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.
 * - Тёмная тема по умолчанию; значения токенов — для dark UI
 *//* ============================================
   TYPOGRAPHY VARIABLES
   ============================================ */:root{
    /* Font Families */
    --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-numeric: 'Basel', 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-radius-input: var(--radius-full);
    --button-radius: var(--radius-full);
    --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: var(--radius-circle);

    /* 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{
    /* Как .life-calendar-cell — единая полупрозрачная заливка для полей, селектов, вторичных кнопок */
    --color-surface-muted: rgba(238, 238, 238, 0.06);
    --color-surface-muted-hover: rgba(238, 238, 238, 0.1);

    /* Background Colors */
    --color-bg-primary: #1A1A1A;
    /* Холст приложения под видео/градиентами (Assistant, Nucleus body) — темнее карточного primary */
    --color-bg-canvas: #020203;
    --color-bg-secondary: #121212;
    --color-bg-tertiary: #272727;
    --color-bg-card: var(--color-surface-muted);
    --color-bg-input: var(--color-surface-muted);
    --color-bg-input-focus: var(--color-surface-muted-hover);
    --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: #eeeeee;
    --color-text-secondary: rgba(238, 238, 238, 0.7);
    --color-text-tertiary: rgba(238, 238, 238, 0.5);
    --color-text-disabled: rgba(238, 238, 238, 0.4);
    --color-text-muted: rgba(238, 238, 238, 0.3);
    --color-text-inverse: #000000;
    
    /* Border Colors */
    --color-border-primary: rgba(93, 93, 93, 0.1);
    --color-border-secondary: rgba(238, 238, 238, 0.08);
    --color-border-tertiary: rgba(238, 238, 238, 0.05);
    --color-border-error: rgba(239, 68, 68, 0.32);
    
    /* Акцент UI (ссылки, обводки): нейтральный светлый — body уже белый, не дублируем «primary» */
    --color-accent-primary: #D4D4D4;
    --color-accent-hover: #E5E5E5;
    --color-accent-active: #A3A3A3;
    --color-accent-light: rgba(238, 238, 238, 0.4);
    
    /* Status: ошибка — красный (без оранжевого); предупреждение — жёлтый */
    --color-success: #4BAE78;
    --color-error: #ef4444;
    --color-warning: #eab308;
    --color-info: #3b82f6;
    
    /* Primary = белая кнопка, тёмный текст (WCAG на #1A1A1A фоне) */
    --color-button-primary: #eeeeee;
    --color-button-primary-text: #0A0A0A;
    --color-button-primary-hover: #F0F0F0;
    --color-button-primary-active: #E0E0E0;
    --color-button-primary-disabled: #3F3F46;
    --color-button-primary-disabled-text: #A1A1AA;
    --color-button-primary-focus: rgba(238, 238, 238, 0.5);
    --color-button-secondary: var(--color-surface-muted);
    --color-button-secondary-hover: var(--color-surface-muted-hover);

    /* Input Colors (согласованы с --color-surface-muted) */
    --color-input-bg: var(--color-surface-muted);
    --color-input-bg-hover: var(--color-surface-muted-hover);
    --color-input-bg-focus: var(--color-surface-muted-hover);
    --color-input-text: #eeeeee;
    --color-input-placeholder: rgba(238, 238, 238, 0.3);
    --color-input-border: none;
    --color-input-border-focus: none;

    /*
     * Стекло для инпутов / кастомных селектов / выпадашек (эталон: invoice-controls-unified.css).
     * Поверх контента с blur; панель списка — плотнее, чем триггер.
     */
    --control-glass-surface: rgba(238, 238, 238, 0.08);
    --control-glass-surface-hover: rgba(238, 238, 238, 0.1);
    --control-glass-surface-focus: rgba(238, 238, 238, 0.11);
    --control-glass-panel: rgba(18, 18, 18, 0.92);
    --control-glass-panel-border: 1px solid rgba(238, 238, 238, 0.06);
    --control-glass-blur: blur(8px);
    --control-glass-blur-dropdown: blur(12px);
    --control-glass-dropdown-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
    --control-glass-option-hover: rgba(238, 238, 238, 0.1);
    
    /* Logo Colors */
    --color-logo: #eeeeee;
    --color-logo-inverse: #000000;
    
    /* Switch Colors */
    --color-switch-bg: #272727;
    --color-switch-slider: #eeeeee;
    
    /* 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;

    /* Nucleus Finance hub — NUCLEUS_TOKENS_COMPONENTS §2.2 */
    --nucleus-hub-content-max: 60rem;
    --nucleus-hub-surface: var(--color-surface-muted);
    --nucleus-hub-surface-border: var(--color-border-secondary);
    --nucleus-hub-divider: color-mix(in srgb, var(--color-border-secondary) 72%, transparent);
    --nucleus-insights-block-bg: var(--nucleus-hub-surface);
    --nucleus-insights-block-border: var(--nucleus-hub-surface-border);
    --nucleus-insights-block-radius: var(--radius-md);
}/* ============================================
   BORDER RADIUS VARIABLES
   ============================================ */:root{
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-3xl: 24px;
    --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);
}/* ============================================
   Z-INDEX VARIABLES
   ============================================ */:root{
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    /* Маркетинговый scroll header: выше секций/hero/chat, ниже прелоадера и модалок */
    --z-scroll-header: 9000;
    --z-scroll-header-menu: 9010;
    --z-modal-backdrop: 10000;
    --z-modal: 10001;
    --z-tooltip: 20000;
    --z-max: 2147483647;
}

/* Mobile app rhythm tokens (applied by mobile media blocks). */
:root{
    --mobile-shell-max-width: 540px;
    --mobile-page-padding-x: var(--spacing-lg);
    --mobile-page-padding-y: var(--spacing-xl);
    --mobile-stack-gap: var(--spacing-lg);
    --mobile-card-radius: var(--radius-2xl);
    --mobile-card-padding: var(--spacing-lg);
    --mobile-tap-target: 44px;
}

/* Badges use sentence/title case across product surfaces. */
[class*="badge" i] {
    text-transform: none !important;
}

/* Button-like links should look like controls, not text links. */
:where(
    button,
    a[role="button"],
    a[class*="btn" i],
    a[class*="button" i],
    a[class*="action" i],
    a[class*="cta" i]
) {
    text-decoration: none;
}

:where(
    button,
    a[role="button"],
    a[class*="btn" i],
    a[class*="button" i],
    a[class*="action" i],
    a[class*="cta" i]
):where(:hover, :focus, :focus-visible) {
    text-decoration: none;
}