/* ========================================
   SMART OASIS - THEME SYSTEM
   Modern & Elegant Theme with Sophisticated Colors
   Primary: Deep Teal, Secondary: Warm Gold, Accent: Soft Blue
   ======================================== */

/* CSS Variables - Light Theme (Default) */
:root,
[data-theme="light"] {
    /* Brand Colors - Modern Palette */
    --color-primary: #0b85a4;        /* Brand Teal from logo */
    --color-primary-dark: #096f89;   /* Darker */
    --color-primary-light: #18a9c0;  /* Light */
    --color-primary-rgb: 11,133,164;

    /* Secondary Colors - Warm & Elegant */
    --color-secondary: #92400e;      /* Warm Brown */
    --color-accent: #3b82f6;         /* Soft Blue */
    --color-success: #059669;        /* Emerald Green */
    --color-warning: #d97706;        /* Amber */
    --color-error: #dc2626;          /* Red */
    --color-info: #2563eb;           /* Blue */

    /* Neutral Colors - Refined Grays */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #fafaf9;        /* Warm white */
    --color-gray-100: #f5f5f4;
    --color-gray-200: #e7e5e4;
    --color-gray-300: #d6d3d1;
    --color-gray-400: #a8a29e;
    --color-gray-500: #78716c;
    --color-gray-600: #57534e;
    --color-gray-700: #44403c;
    --color-gray-800: #292524;
    --color-gray-900: #1c1917;

    /* Semantic Colors */
    --color-background: linear-gradient(135deg, #fafaf9 0%, #f5f5f4 100%);
    --color-surface: var(--color-white);
    --color-surface-elevated: var(--color-white);
    --color-text: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-muted: var(--color-gray-400);
    --color-border: var(--color-gray-200);
    --color-border-light: var(--color-gray-100);
    
    /* Semantic Colors */
    --color-background: var(--color-white);
    --color-surface: var(--color-gray-50);
    --color-surface-elevated: var(--color-white);
    --color-text: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-muted: var(--color-gray-400);
    --color-border: var(--color-gray-200);
    --color-border-light: var(--color-gray-100);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Adjusted Colors for Dark Theme */
    --color-primary: #1e9fc0;
    --color-primary-dark: #0a85a4;
    --color-primary-light: #3ab8d8;
    
    /* Dark Theme Colors */
    --color-background: #0a0a0a;
    --color-surface: #1a1a1a;
    --color-surface-elevated: #252525;
    --color-text: #f5f5f5;
    --color-text-secondary: #a0a0a0;
    --color-text-muted: #666666;
    --color-border: #333333;
    --color-border-light: #2a2a2a;
    
    /* Adjusted Shadows for Dark Theme */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --color-border: var(--color-text);
        --color-text-secondary: var(--color-text);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Theme Transition for Smooth Switching */
* {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

/* Skip animations for specific elements */
.no-transition {
    transition: none !important;
}