/**
 * DocuFlow CSS Variables
 * Centralized theme variables for consistent theming across all components
 */

:root {
    /* ========== Base Colors - Light Theme (Default) ========== */
    --primary: #1a3a52;
    --primary-dark: #0f2438;
    --primary-light: #2c5f8d;
    --secondary: #2c5f8d;
    --accent: #3498db;
    --accent-hover: #2980b9;
    --accent-active: #21618c;
    --accent-alpha: rgba(52, 152, 219, 0.1);
    --accent-alpha-20: rgba(52, 152, 219, 0.2);
    --accent-alpha-30: rgba(52, 152, 219, 0.3);

    /* ========== Surfaces ========== */
    --background: #f5f7fa;
    --surface: #ffffff;
    --surface-hover: #f3f4f6;
    --surface-alt: #f8f9fa;
    --surface-active: #e9ecef;
    --card-background: #ffffff;

    /* ========== Text Colors ========== */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-disabled: #bdc3c7;
    --text-inverse: #ffffff;
    --text-muted: #95a5a6;

    /* ========== Borders ========== */
    --border: #dce1e8;
    --border-light: #e9ecef;
    --border-dark: #ced4da;
    --border-focus: #3498db;

    /* ========== States - Success ========== */
    --success: #27ae60;
    --success-bg: #d4edda;
    --success-text: #155724;
    --success-border: #c3e6cb;
    --success-hover: #229954;

    /* ========== States - Warning ========== */
    --warning: #f39c12;
    --warning-bg: #fff3cd;
    --warning-text: #856404;
    --warning-border: #ffeaa7;
    --warning-hover: #e67e22;

    /* ========== States - Error ========== */
    --error: #e74c3c;
    --error-bg: #f8d7da;
    --error-text: #721c24;
    --error-border: #f5c6cb;
    --error-hover: #c0392b;

    /* ========== States - Info ========== */
    --info: #3498db;
    --info-bg: #d1ecf1;
    --info-text: #0c5460;
    --info-border: #bee5eb;
    --info-hover: #2980b9;

    /* ========== Inputs ========== */
    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-border-hover: var(--border-dark);
    --input-focus: var(--accent);
    --input-focus-shadow: rgba(52, 152, 219, 0.1);
    --input-disabled: var(--background);
    --input-disabled-text: var(--text-disabled);
    --input-placeholder: var(--text-muted);

    /* ========== Code Syntax Highlighting ========== */
    --syntax-keyword: #c678dd;
    --syntax-string: #98c379;
    --syntax-comment: #7f848e;
    --syntax-number: #d19a66;
    --syntax-function: #61afef;
    --syntax-variable: #e06c75;
    --syntax-decorator: #e5c07b;
    --code-bg: var(--background);
    --code-text: var(--text-primary);
    --code-border: var(--border);

    /* ========== Shadows ========== */
    --shadow-sm: rgba(0, 0, 0, 0.05);
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.15);
    --shadow-lg: rgba(0, 0, 0, 0.2);
    --shadow-xl: rgba(0, 0, 0, 0.3);

    /* ========== Spacing ========== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ========== Border Radius ========== */
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;

    /* ========== Typography ========== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-mono: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;

    /* ========== Transitions ========== */
    --transition: 0.2s ease;
    --transition-fast: 0.15s ease;
    --transition-slow: 0.3s ease;

    /* ========== Z-index Layers ========== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-notification: 700;

    /* ========== Legacy Aliases (for backward compatibility) ========== */
    --bg-primary: var(--background);
    --bg-secondary: var(--surface);
    --border-color: var(--border);
    --primary-color: var(--primary);
    --text-color: var(--text-primary);
}

/* ========== Dark Theme ========== */
[data-theme="dark"],
.theme-dark {
    --primary: #2c3e50;
    --primary-dark: #1a252f;
    --primary-light: #34495e;
    --secondary: #34495e;
    --accent: #5dade2;
    --accent-hover: #3498db;
    --accent-active: #2980b9;
    --accent-alpha: rgba(93, 173, 226, 0.1);
    --accent-alpha-20: rgba(93, 173, 226, 0.2);
    --accent-alpha-30: rgba(93, 173, 226, 0.3);

    /* Surfaces */
    --background: #1a1a1a;
    --surface: #2d2d2d;
    --surface-hover: #3a3a3a;
    --surface-alt: #252525;
    --surface-active: #404040;
    --card-background: #2d2d2d;

    /* Text */
    --text-primary: #ecf0f1;
    --text-secondary: #bdc3c7;
    --text-disabled: #7f8c8d;
    --text-inverse: #2c3e50;
    --text-muted: #95a5a6;

    /* Borders */
    --border: #404040;
    --border-light: #4a4a4a;
    --border-dark: #353535;
    --border-focus: #5dade2;

    /* Success */
    --success: #2ecc71;
    --success-bg: rgba(46, 204, 113, 0.2);
    --success-text: #27ae60;
    --success-border: rgba(46, 204, 113, 0.3);
    --success-hover: #27ae60;

    /* Warning */
    --warning: #f39c12;
    --warning-bg: rgba(243, 156, 18, 0.2);
    --warning-text: #e67e22;
    --warning-border: rgba(243, 156, 18, 0.3);
    --warning-hover: #e67e22;

    /* Error */
    --error: #e74c3c;
    --error-bg: rgba(231, 76, 60, 0.2);
    --error-text: #c0392b;
    --error-border: rgba(231, 76, 60, 0.3);
    --error-hover: #c0392b;

    /* Info */
    --info: #5dade2;
    --info-bg: rgba(93, 173, 226, 0.2);
    --info-text: #3498db;
    --info-border: rgba(93, 173, 226, 0.3);
    --info-hover: #3498db;

    /* Inputs */
    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-border-hover: var(--border-light);
    --input-focus: var(--accent);
    --input-focus-shadow: rgba(93, 173, 226, 0.2);
    --input-disabled: var(--surface-alt);
    --input-disabled-text: var(--text-disabled);

    /* Code Syntax */
    --syntax-keyword: #c678dd;
    --syntax-string: #98c379;
    --syntax-comment: #7f848e;
    --syntax-number: #d19a66;
    --syntax-function: #61afef;
    --syntax-variable: #e06c75;
    --syntax-decorator: #e5c07b;
    --code-bg: #1e1e1e;
    --code-text: #d4d4d4;
    --code-border: #3e3e42;

    /* Shadows */
    --shadow-sm: rgba(0, 0, 0, 0.2);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --shadow-xl: rgba(0, 0, 0, 0.6);

    /* Legacy Aliases */
    --bg-primary: var(--background);
    --bg-secondary: var(--surface);
    --border-color: var(--border);
    --primary-color: var(--primary);
    --text-color: var(--text-primary);
}

/* ========== High Contrast Theme (ИСПРАВЛЕННЫЙ) ========== */
[data-theme="high-contrast"],
.theme-high-contrast {
    /* Primary colors - более контрастные */
    --primary: #000000;
    --primary-dark: #000000;
    --primary-light: #333333; /* ✅ Добавить градацию */
    --secondary: #333333;
    --accent: #0000ff;
    --accent-hover: #0000cc;
    --accent-active: #000099;
    --accent-alpha: rgba(0, 0, 255, 0.2); /* ✅ Более заметный */
    --accent-alpha-20: rgba(0, 0, 255, 0.3);
    --accent-alpha-30: rgba(0, 0, 255, 0.4);

    /* Surfaces - добавить градацию */
    --background: #ffffff;
    --surface: #ffffff;
    --surface-hover: #e0e0e0; /* ✅ Исправить: было #f0f0f0 */
    --surface-alt: #f5f5f5; /* ✅ Добавить */
    --surface-active: #d0d0d0; /* ✅ Исправить: было #e0e0e0 */
    --card-background: #ffffff;

    /* Text - исправить контрастность */
    --text-primary: #000000;
    --text-secondary: #333333; /* ✅ Исправить: было #000000 */
    --text-disabled: #999999; /* ✅ Исправить: было #666666 */
    --text-inverse: #ffffff;
    --text-muted: #666666; /* ✅ Исправить: было #000000 */

    /* Borders - более контрастные */
    --border: #000000;
    --border-light: #333333; /* ✅ Добавить */
    --border-dark: #000000;
    --border-focus: #0000ff;

    /* Success - более контрастный */
    --success: #008000;
    --success-bg: #e6ffe6; /* ✅ Добавить фон */
    --success-text: #004d00; /* ✅ Более темный */
    --success-border: #008000;
    --success-hover: #006600;

    /* Warning - более контрастный */
    --warning: #ff6600; /* ✅ Исправить: было #ff8c00 */
    --warning-bg: #fff4e6; /* ✅ Добавить фон */
    --warning-text: #cc5200; /* ✅ Более темный */
    --warning-border: #ff6600;
    --warning-hover: #cc5200;

    /* Error - более контрастный */
    --error: #ff0000;
    --error-bg: #ffe6e6; /* ✅ Добавить фон */
    --error-text: #cc0000; /* ✅ Более темный */
    --error-border: #ff0000;
    --error-hover: #cc0000;

    /* Info - более контрастный */
    --info: #0000ff;
    --info-bg: #e6f0ff; /* ✅ Добавить фон */
    --info-text: #0000cc; /* ✅ Более темный */
    --info-border: #0000ff;
    --info-hover: #0000cc;

    /* Inputs - более контрастные */
    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-border-hover: var(--accent); /* ✅ Исправить: было var(--border) */
    --input-focus: var(--accent);
    --input-focus-shadow: rgba(0, 0, 255, 0.5); /* ✅ Более заметная тень */
    --input-disabled: var(--surface-hover);
    --input-disabled-text: var(--text-disabled);

    /* Code Syntax - более контрастные */
    --syntax-keyword: #0000ff;
    --syntax-string: #008000;
    --syntax-comment: #666666;
    --syntax-number: #ff6600; /* ✅ Исправить: было #ff8c00 */
    --syntax-function: #0000ff;
    --syntax-variable: #ff0000;
    --syntax-decorator: #ff6600; /* ✅ Исправить: было #ff8c00 */
    --code-bg: #ffffff;
    --code-text: #000000;
    --code-border: #000000;

    /* Shadows - более контрастные */
    --shadow-sm: rgba(0, 0, 0, 0.5); /* ✅ Исправить: было 0.3 */
    --shadow: rgba(0, 0, 0, 0.7); /* ✅ Исправить: было 0.5 */
    --shadow-md: rgba(0, 0, 0, 0.8); /* ✅ Исправить: было 0.6 */
    --shadow-lg: rgba(0, 0, 0, 0.9); /* ✅ Исправить: было 0.7 */
    --shadow-xl: rgba(0, 0, 0, 1); /* ✅ Исправить: было 0.8 */

    /* Legacy Aliases */
    --bg-primary: var(--background);
    --bg-secondary: var(--surface);
    --border-color: var(--border);
    --primary-color: var(--primary);
    --text-color: var(--text-primary);
}

/* ========== High Contrast Dark Variant (ИСПРАВЛЕННЫЙ) ========== */
@media (prefers-color-scheme: dark) {
    [data-theme="high-contrast"] {
        --primary: #ffffff;
        --primary-dark: #ffffff;
        --primary-light: #cccccc; /* ✅ Добавить градацию */
        --secondary: #cccccc;
        --accent: #00ffff;
        --accent-hover: #00cccc;
        --accent-active: #009999;
        --accent-alpha: rgba(0, 255, 255, 0.2);
        --accent-alpha-20: rgba(0, 255, 255, 0.3);
        --accent-alpha-30: rgba(0, 255, 255, 0.4);

        /* Surfaces - добавить градацию */
        --background: #000000;
        --surface: #000000;
        --surface-hover: #1a1a1a; /* ✅ Исправить */
        --surface-alt: #0a0a0a; /* ✅ Добавить */
        --surface-active: #333333; /* ✅ Исправить */
        --card-background: #000000;

        /* Text - исправить контрастность */
        --text-primary: #ffffff;
        --text-secondary: #cccccc; /* ✅ Исправить: было #ffffff */
        --text-disabled: #666666; /* ✅ Исправить */
        --text-inverse: #000000;
        --text-muted: #999999; /* ✅ Исправить: было #ffffff */

        /* Borders - более контрастные */
        --border: #ffffff;
        --border-light: #cccccc; /* ✅ Добавить */
        --border-dark: #ffffff;
        --border-focus: #00ffff;

        /* Success - более контрастный */
        --success: #00ff00;
        --success-bg: rgba(0, 255, 0, 0.2); /* ✅ Добавить фон */
        --success-text: #00cc00; /* ✅ Более темный */
        --success-border: #00ff00;
        --success-hover: #00cc00;

        /* Warning - более контрастный */
        --warning: #ffaa00; /* ✅ Исправить */
        --warning-bg: rgba(255, 170, 0, 0.2); /* ✅ Добавить фон */
        --warning-text: #ff8800; /* ✅ Более темный */
        --warning-border: #ffaa00;
        --warning-hover: #ff8800;

        /* Error - более контрастный */
        --error: #ff0000;
        --error-bg: rgba(255, 0, 0, 0.2); /* ✅ Добавить фон */
        --error-text: #ff3333; /* ✅ Более светлый */
        --error-border: #ff0000;
        --error-hover: #ff3333;

        /* Info - более контрастный */
        --info: #00ffff;
        --info-bg: rgba(0, 255, 255, 0.2); /* ✅ Добавить фон */
        --info-text: #00cccc; /* ✅ Более темный */
        --info-border: #00ffff;
        --info-hover: #00cccc;

        /* Inputs - более контрастные */
        --input-bg: var(--surface);
        --input-border: var(--border);
        --input-border-hover: var(--accent); /* ✅ Исправить */
        --input-focus: var(--accent);
        --input-focus-shadow: rgba(0, 255, 255, 0.5); /* ✅ Более заметная тень */
        --input-disabled: var(--surface-hover);
        --input-disabled-text: var(--text-disabled);

        /* Code Syntax - более контрастные */
        --syntax-keyword: #00ffff;
        --syntax-string: #00ff00;
        --syntax-comment: #999999;
        --syntax-number: #ffaa00; /* ✅ Исправить */
        --syntax-function: #00ffff;
        --syntax-variable: #ff0000;
        --syntax-decorator: #ffaa00; /* ✅ Исправить */
        --code-bg: #000000;
        --code-text: #ffffff;
        --code-border: #ffffff;

        /* Shadows - более контрастные */
        --shadow-sm: rgba(255, 255, 255, 0.3);
        --shadow: rgba(255, 255, 255, 0.5);
        --shadow-md: rgba(255, 255, 255, 0.6);
        --shadow-lg: rgba(255, 255, 255, 0.7);
        --shadow-xl: rgba(255, 255, 255, 0.8);

        /* Legacy Aliases */
        --bg-primary: var(--background);
        --bg-secondary: var(--surface);
        --border-color: var(--border);
        --primary-color: var(--primary);
        --text-color: var(--text-primary);
    }
}

/* ========== Coffee Shop Theme (Red) - Light ========== */
[data-theme="coffee-light"],
.theme-coffee-light {
    /* Coffee-inspired colors */
    --primary: #8B4513; /* Saddle Brown */
    --primary-dark: #654321; /* Dark Brown */
    --primary-light: #A0522D; /* Sienna */
    --secondary: #CD853F; /* Peru */
    --accent: #DC143C; /* Crimson Red */
    --accent-hover: #B22222; /* Fire Brick */
    --accent-active: #8B0000; /* Dark Red */
    --accent-alpha: rgba(220, 20, 60, 0.1);
    --accent-alpha-20: rgba(220, 20, 60, 0.2);
    --accent-alpha-30: rgba(220, 20, 60, 0.3);

    /* Warm surfaces */
    --background: #FFF8F0; /* Warm white */
    --surface: #FFFFFF;
    --surface-hover: #FFF5E6; /* Cream */
    --surface-alt: #FFFBF5;
    --surface-active: #FFE4B5; /* Moccasin */
    --card-background: #FFFFFF;

    /* Text */
    --text-primary: #3E2723; /* Brown */
    --text-secondary: #6D4C41; /* Brown Grey */
    --text-disabled: #BCAAA4;
    --text-inverse: #FFFFFF;
    --text-muted: #8D6E63;

    /* Borders */
    --border: #D7CCC8; /* Light Brown */
    --border-light: #EFEBE9;
    --border-dark: #BCAAA4;
    --border-focus: #DC143C;

    /* Success - Green for coffee freshness */
    --success: #2E7D32;
    --success-bg: #E8F5E9;
    --success-text: #1B5E20;
    --success-border: #A5D6A7;
    --success-hover: #1B5E20;

    /* Warning - Amber for coffee temperature */
    --warning: #F57C00;
    --warning-bg: #FFF3E0;
    --warning-text: #E65100;
    --warning-border: #FFB74D;
    --warning-hover: #E65100;

    /* Error - Deep Red */
    --error: #C62828;
    --error-bg: #FFEBEE;
    --error-text: #B71C1C;
    --error-border: #EF5350;
    --error-hover: #B71C1C;

    /* Info - Coffee brown */
    --info: #8B4513;
    --info-bg: #FFF3E0;
    --info-text: #5D4037;
    --info-border: #BCAAA4;
    --info-hover: #654321;

    /* Inputs */
    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-border-hover: var(--border-dark);
    --input-focus: var(--accent);
    --input-focus-shadow: rgba(220, 20, 60, 0.1);
    --input-disabled: var(--background);
    --input-disabled-text: var(--text-disabled);
    --input-placeholder: var(--text-muted);

    /* Code Syntax */
    --syntax-keyword: #8B4513;
    --syntax-string: #2E7D32;
    --syntax-comment: #8D6E63;
    --syntax-number: #F57C00;
    --syntax-function: #DC143C;
    --syntax-variable: #C62828;
    --syntax-decorator: #CD853F;
    --code-bg: var(--background);
    --code-text: var(--text-primary);
    --code-border: var(--border);

    /* Shadows */
    --shadow-sm: rgba(139, 69, 19, 0.1);
    --shadow: rgba(139, 69, 19, 0.15);
    --shadow-md: rgba(139, 69, 19, 0.2);
    --shadow-lg: rgba(139, 69, 19, 0.25);
    --shadow-xl: rgba(139, 69, 19, 0.3);

    /* Legacy Aliases */
    --bg-primary: var(--background);
    --bg-secondary: var(--surface);
    --border-color: var(--border);
    --primary-color: var(--primary);
    --text-color: var(--text-primary);
}

/* ========== Coffee Shop Theme (Red) - Dark ========== */
[data-theme="coffee-dark"],
.theme-coffee-dark {
    /* Dark coffee colors */
    --primary: #5D4037;
    --primary-dark: #3E2723;
    --primary-light: #6D4C41;
    --secondary: #8D6E63;
    --accent: #EF5350; /* Light Red */
    --accent-hover: #E53935;
    --accent-active: #C62828;
    --accent-alpha: rgba(239, 83, 80, 0.1);
    --accent-alpha-20: rgba(239, 83, 80, 0.2);
    --accent-alpha-30: rgba(239, 83, 80, 0.3);

    /* Dark surfaces */
    --background: #1A1A1A;
    --surface: #2D241F; /* Dark brown */
    --surface-hover: #3E2723;
    --surface-alt: #261F1C;
    --surface-active: #4E342E;
    --card-background: #2D241F;

    /* Text */
    --text-primary: #EFEBE9;
    --text-secondary: #BCAAA4;
    --text-disabled: #8D6E63;
    --text-inverse: #3E2723;
    --text-muted: #A1887F;

    /* Borders */
    --border: #4E342E;
    --border-light: #5D4037;
    --border-dark: #3E2723;
    --border-focus: #EF5350;

    /* Success */
    --success: #66BB6A;
    --success-bg: rgba(102, 187, 106, 0.2);
    --success-text: #4CAF50;
    --success-border: rgba(102, 187, 106, 0.3);
    --success-hover: #4CAF50;

    /* Warning */
    --warning: #FFA726;
    --warning-bg: rgba(255, 167, 38, 0.2);
    --warning-text: #FF9800;
    --warning-border: rgba(255, 167, 38, 0.3);
    --warning-hover: #FF9800;

    /* Error */
    --error: #EF5350;
    --error-bg: rgba(239, 83, 80, 0.2);
    --error-text: #E53935;
    --error-border: rgba(239, 83, 80, 0.3);
    --error-hover: #E53935;

    /* Info */
    --info: #8D6E63;
    --info-bg: rgba(141, 110, 99, 0.2);
    --info-text: #6D4C41;
    --info-border: rgba(141, 110, 99, 0.3);
    --info-hover: #6D4C41;

    /* Inputs */
    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-border-hover: var(--border-light);
    --input-focus: var(--accent);
    --input-focus-shadow: rgba(239, 83, 80, 0.2);
    --input-disabled: var(--surface-alt);
    --input-disabled-text: var(--text-disabled);
    --input-placeholder: var(--text-muted);

    /* Code Syntax */
    --syntax-keyword: #8D6E63;
    --syntax-string: #66BB6A;
    --syntax-comment: #A1887F;
    --syntax-number: #FFA726;
    --syntax-function: #EF5350;
    --syntax-variable: #E53935;
    --syntax-decorator: #BCAAA4;
    --code-bg: #1E1E1E;
    --code-text: #EFEBE9;
    --code-border: #4E342E;

    /* Shadows */
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-md: rgba(0, 0, 0, 0.5);
    --shadow-lg: rgba(0, 0, 0, 0.6);
    --shadow-xl: rgba(0, 0, 0, 0.7);

    /* Legacy Aliases */
    --bg-primary: var(--background);
    --bg-secondary: var(--surface);
    --border-color: var(--border);
    --primary-color: var(--primary);
    --text-color: var(--text-primary);
}