/**
 * 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;
    --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;
}

/* ============================================
   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%, rgba(39, 39, 39, 0.32) 100%);
    --color-bg-chat: linear-gradient(180deg, #272727 0%, rgba(39, 39, 39, 0.32) 100%);
    --color-bg-chat-input-area: linear-gradient(to top, #1212121a 0%, 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(255, 68, 68, 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: #ff4444;
    --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
   ============================================ */

body.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: rgb(255, 255, 255);
    --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(255, 68, 68, 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: #dc2626;
    --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%;
}

/* ============================================
   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;
}