/* Smart Show - CSS Variables */

:root {
    /* Brand Colors */
    --sage-primary: #7c9885;
    --sage-secondary: #9cb4a8;
    --sage-light: #c4d4c7;
    --sage-lighter: #f0f4f1;
    --sage-dark: #5a6b5d;
    
    /* Theme Colors - Light (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --border-color: #dee2e6;
    
    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.1);
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-3d: 0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    
    /* Legacy Variables */
    --white: #ffffff;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #d0d0d0;
    --gray-400: #9e9e9e;
    --gray-500: #757575;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #1a1a1a;
    
    /* Gradients */
    --gradient-ai: linear-gradient(135deg, var(--sage-primary), var(--sage-secondary));
    --gradient-secondary: linear-gradient(135deg, var(--sage-secondary), var(--sage-light));
    
    /* Semantic Colors */
    --primary: var(--sage-primary);
    --primary-dark: var(--sage-dark);
    --accent: #ff6b6b;
    --success: #78a07f;
    --error: #e74c3c;
    --warning: #f39c12;
    --info: #3498db;
}

/* Dark Theme Variables - Sage Branded */
body.theme-dark {
    /* Dark backgrounds using sage tones */
    --bg-primary: #1a1f1c;
    --bg-secondary: #2a332f;
    --bg-tertiary: #3a4740;
    
    /* Text colors with sage undertones */
    --text-primary: #e8f0e6;
    --text-secondary: #b8c5b3;
    --text-muted: #8a9a85;
    
    /* Borders using sage colors */
    --border-color: #4a5a4f;
    
    /* Glass Effects with sage tint */
    --glass-bg: rgba(42, 51, 47, 0.9);
    --glass-border: rgba(124, 152, 133, 0.2);
    
    /* Enhanced shadows with sage tint */
    --shadow-sm: 0 2px 4px rgba(26, 31, 28, 0.4);
    --shadow-md: 0 4px 8px rgba(26, 31, 28, 0.5);
    --shadow-lg: 0 8px 16px rgba(26, 31, 28, 0.6);
    
    /* Sage brand colors adjusted for dark theme */
    --sage-primary: #8ba892;
    --sage-secondary: #a5c0b0;
    --sage-light: #c4d4c7;
    --sage-lighter: #2a332f;
    --sage-dark: #6b7a6f;
    
    /* Legacy Dark Mode Variables - Sage themed */
    --white: #1a1f1c;
    --gray-50: #1a1f1c;
    --gray-100: #2a332f;
    --gray-200: #3a4740;
    --gray-300: #4a5a4f;
    --gray-400: #5a6b5d;
    --gray-500: #6a7a6f;
    --gray-600: #7a8a7f;
    --gray-700: #8a9a85;
    --gray-800: #9aaa8f;
    --gray-900: #aaba93;
}

/* Auto Theme - follows system preference */
body.theme-auto {
    /* Variables will be set by JavaScript based on system preference */
}

/* Legacy Dark Mode Support (for backward compatibility) - Sage themed */
body.dark-mode {
    --bg-primary: #1a1f1c;
    --bg-secondary: #2a332f;
    --bg-tertiary: #3a4740;
    --text-primary: #e8f0e6;
    --text-secondary: #b8c5b3;
    --text-muted: #8a9a85;
    --border-color: #4a5a4f;
    --glass-bg: rgba(42, 51, 47, 0.9);
    --glass-border: rgba(124, 152, 133, 0.2);
    --shadow-sm: 0 2px 4px rgba(26, 31, 28, 0.4);
    --shadow-md: 0 4px 8px rgba(26, 31, 28, 0.5);
    --shadow-lg: 0 8px 16px rgba(26, 31, 28, 0.6);
    --sage-lighter: #2a332f;
    --sage-dark: #6b7a6f;
    --sage-secondary: #a5c0b0;
    --sage-light: #c4d4c7;
    --white: #1a1f1c;
    --gray-50: #1a1f1c;
    --gray-100: #2a332f;
    --gray-200: #3a4740;
    --gray-300: #4a5a4f;
    --gray-400: #5a6b5d;
    --gray-500: #6a7a6f;
    --gray-600: #7a8a7f;
    --gray-700: #8a9a85;
    --gray-800: #9aaa8f;
    --gray-900: #aaba93;
}