/* ============================================
   THEME VARIABLES
   Centralized CSS Custom Properties for all themes
   Phase 3 & 4 of THEMING_INITIATIVE.md
   
   This file contains ALL theme color definitions.
   Import this file before public-pages.css
   
   Auto dark mode: When user's OS prefers dark mode,
   Space theme is applied automatically (Phase 4)
   ============================================ */

/* ============================================
   📐 GLOBAL LAYOUT VARIABLES
   Shared dimensions used across all themes
   ============================================ */
:root {
    --header-height: 56px;
    --drawer-width: 280px;
    --footer-height: 60px;
    --transition-duration: 0.3s;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   ☁️ CLOUD THEME (Light - Default)
   Professional, clean, airy feel
   ============================================ */
:root,
.theme-cloud {
    /* Page Background */
    --theme-page-bg: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);

    /* Text Colors */
    --theme-text-primary: #1e3a5f;
    --theme-text-secondary: #475569;
    --theme-text-muted: #94a3b8;
    --theme-text-hint: #64748b;
    --theme-text-danger: #dc2626;
    --theme-text-success: #15803d; /* Dark green for light mode */
    --theme-text-warning: #b45309; /* Dark amber */
    --theme-text-info: #0369a1; /* Dark sky */
    
    /* Header & Action Backgrounds */
    --theme-header-bg: #1e3a5f;
    --theme-bg-danger: rgba(220, 38, 38, 0.1);
    --theme-bg-success: rgba(22, 163, 74, 0.1);
    --theme-bg-warning: rgba(217, 119, 6, 0.1);
    --theme-bg-info: rgba(14, 165, 233, 0.1);

    /* Sign-in Button */
    --theme-signin-color: #1e3a5f;
    --theme-signin-hover-bg: rgba(30, 58, 95, 0.1);
    
    /* Chips/Tags */
    --theme-chip-bg: rgba(124, 58, 237, 0.08);
    --theme-chip-color: #7c3aed;
    --theme-chip-hover-bg: rgba(124, 58, 237, 0.15);
    --theme-chip-border: rgba(124, 58, 237, 0.3);
    
    /* Links */
    --theme-link-color: #94a3b8;
    --theme-link-hover-color: #64748b;
    --theme-link-hover-bg: rgba(148, 163, 184, 0.1);
    
    /* Footer */
    --theme-footer-color: #94a3b8;
    --theme-footer-hover-color: #64748b;

    /* Surfaces & Borders */
    --theme-surface: #ffffff;
    --theme-surface-secondary: #f8fafc;
    --theme-border: #e2e8f0;
    
    /* Inputs */
    --theme-input-bg: #ffffff;
    --theme-input-border: #cbd5e1;
    --theme-input-text: #1e293b;
    --theme-input-focus: #3b82f6;

    /* Buttons */
    --theme-primary: #3b82f6;
    --theme-primary-hover: #2563eb;
    --theme-btn-text: #ffffff;
    --theme-secondary: #f1f5f9;
    --theme-secondary-hover: #e2e8f0;
    --theme-secondary-text: #64748b;
    --theme-accent: #6366f1;
    
    /* Gradients (Flattened for standardizing boxes/sections) */
    --theme-gradient-text: #3b82f6; 
    --theme-cta-gradient: #3b82f6;
    
    /* Shadows */
    --theme-shadow-color: rgba(59, 130, 246, 0.5);
    --theme-title-shadow: 0 2px 20px rgba(255, 255, 255, 0.5);
    --theme-subtitle-shadow: 0 1px 10px rgba(255, 255, 255, 0.8);
}

/* ============================================
   🚀 SPACE THEME (Dark)
   Cosmic, immersive, night mode
   ============================================ */
.theme-space {
/* Page Background */
--theme-page-bg: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);

/* Text Colors */
--theme-text-primary: #f1f5f9;
--theme-text-danger: #f87171;
--theme-text-success: #4ade80;
--theme-text-warning: #fbbf24;
--theme-text-info: #38bdf8;
--theme-text-secondary: #94a3b8;
--theme-text-muted: #64748b;
--theme-text-hint: #94a3b8;

/* Header & Action Backgrounds */
--theme-header-bg: #0f0a1e;
--theme-bg-danger: rgba(239, 68, 68, 0.15);
--theme-bg-success: rgba(34, 197, 94, 0.15);
--theme-bg-warning: rgba(245, 158, 11, 0.15);
--theme-bg-info: rgba(56, 189, 248, 0.15);

/* Surfaces & Borders */
--theme-surface: #1e293b;
--theme-surface-secondary: #0f172a;
--theme-border: #334155;
    
/* Inputs */
--theme-input-bg: #0f172a;
--theme-input-border: #475569;
--theme-input-text: #f1f5f9;
--theme-input-focus: #a855f7;

/* Buttons */
--theme-primary: #a855f7;
--theme-primary-hover: #9333ea;
--theme-btn-text: #ffffff;
--theme-secondary: #334155;
--theme-secondary-hover: #475569;
--theme-secondary-text: #f1f5f9;
--theme-accent: #a855f7;
    
/* Sign-in Button */
    --theme-signin-color: #ffffff;
    --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);
    
    /* Chips/Tags */
    --theme-chip-bg: rgba(168, 85, 247, 0.2);
    --theme-chip-color: #c4b5fd;
    --theme-chip-hover-bg: rgba(168, 85, 247, 0.3);
    --theme-chip-border: rgba(168, 85, 247, 0.4);
    
    /* Links */
    --theme-link-color: #64748b;
    --theme-link-hover-color: #94a3b8;
    --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Footer */
    --theme-footer-color: rgba(255, 255, 255, 0.5);
    --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
    
    /* Gradients */
    --theme-gradient-text: #a855f7;
    --theme-cta-gradient: #a855f7;
    
    /* Shadows */
    --theme-shadow-color: rgba(168, 85, 247, 0.5);
    --theme-title-shadow: 0 0 40px rgba(168, 85, 247, 0.5);
    --theme-subtitle-shadow: 0 0 20px rgba(148, 163, 184, 0.3);
}

/* ============================================
   ❄️ WINTER THEME (Dark)
   Cool, calm, serene
   ============================================ */
.theme-winter {
    /* Page Background */
    --theme-page-bg: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);

    /* Text Colors */
    --theme-text-primary: #f0f9ff;
    --theme-text-secondary: #bae6fd;
    --theme-text-muted: #7dd3fc;
    --theme-text-hint: #bae6fd;
    --theme-text-danger: #f87171;
    --theme-text-success: #4ade80;
    --theme-text-warning: #fbbf24;
    --theme-text-info: #38bdf8;

    /* Header & Action Backgrounds */
    --theme-header-bg: #164e63;
    --theme-bg-danger: rgba(239, 68, 68, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);

/* Surfaces & Borders */
--theme-surface: #1e293b;
--theme-surface-secondary: #0f172a;
--theme-border: #334155;
    
/* Inputs */
--theme-input-bg: #0f172a;
--theme-input-border: #475569;
--theme-input-text: #f0f9ff;
--theme-input-focus: #38bdf8;

    /* Buttons */
    --theme-primary: #0ea5e9;
    --theme-primary-hover: #0284c7;
    --theme-btn-text: #ffffff;
    --theme-secondary: #334155;
    --theme-secondary-hover: #475569;
    --theme-secondary-text: #e0f2fe;
    --theme-accent: #38bdf8;
    
    /* Sign-in Button */
    --theme-signin-color: #ffffff;
    --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);
    
    /* Chips/Tags */
    --theme-chip-bg: rgba(186, 230, 253, 0.15);
    --theme-chip-color: #e0f2fe;
    --theme-chip-hover-bg: rgba(186, 230, 253, 0.25);
    --theme-chip-border: rgba(186, 230, 253, 0.3);
    
    /* Links */
    --theme-link-color: #7dd3fc;
    --theme-link-hover-color: #bae6fd;
    --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Footer */
    --theme-footer-color: rgba(255, 255, 255, 0.5);
    --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
    
    /* Gradients (Flattened) */
    --theme-gradient-text: #06b6d4;
    --theme-cta-gradient: #0891b2;
    
    /* Shadows */
    --theme-shadow-color: rgba(14, 165, 233, 0.5);
    --theme-title-shadow: 0 2px 20px rgba(186, 230, 253, 0.4);
    --theme-subtitle-shadow: 0 1px 10px rgba(186, 230, 253, 0.3);
}

/* ============================================
   🌿 NATURE THEME (Dark)
   Organic, earthy, forest vibes
   ============================================ */
.theme-nature {
    /* Page Background */
    --theme-page-bg: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #22c55e 100%);

    /* Text Colors */
    --theme-text-primary: #f0fdf4;
    --theme-text-secondary: #bbf7d0;
    --theme-text-muted: #86efac;
    --theme-text-hint: #bbf7d0;
    --theme-text-danger: #f87171;
    --theme-text-success: #4ade80;
    --theme-text-warning: #fbbf24;
    --theme-text-info: #38bdf8;

    /* Header & Action Backgrounds */
    --theme-header-bg: #14532d;
    --theme-bg-danger: rgba(239, 68, 68, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);

/* Surfaces & Borders */
--theme-surface: #14532d;
--theme-surface-secondary: #0f172a;
--theme-border: #166534;
    
/* Inputs */
--theme-input-bg: #052e16;
--theme-input-border: #22c55e;
--theme-input-text: #f0fdf4;
--theme-input-focus: #4ade80;

    /* Buttons */
    --theme-primary: #22c55e;
    --theme-primary-hover: #16a34a;
    --theme-btn-text: #052e16;
    --theme-secondary: #166534;
    --theme-secondary-hover: #14532d;
    --theme-secondary-text: #f0fdf4;
    --theme-accent: #4ade80;
    
    /* Sign-in Button */
    --theme-signin-color: #ffffff;
    --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);
    
    /* Chips/Tags */
    --theme-chip-bg: rgba(134, 239, 172, 0.15);
    --theme-chip-color: #dcfce7;
    --theme-chip-hover-bg: rgba(134, 239, 172, 0.25);
    --theme-chip-border: rgba(134, 239, 172, 0.3);
    
    /* Links */
    --theme-link-color: #86efac;
    --theme-link-hover-color: #bbf7d0;
    --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Footer */
    --theme-footer-color: rgba(255, 255, 255, 0.5);
    --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
    
    /* Gradients (Flattened) */
    --theme-gradient-text: #4ade80;
    --theme-cta-gradient: #16a34a;
    
    /* Shadows */
    --theme-shadow-color: rgba(34, 197, 94, 0.5);
    --theme-title-shadow: 0 2px 20px rgba(5, 46, 22, 0.4);
    --theme-subtitle-shadow: 0 1px 10px rgba(5, 46, 22, 0.3);
}

/* ============================================
   🌊 OCEAN THEME (Dark)
   Refreshing, fluid, sunset vibes
   ============================================ */
.theme-ocean {
    /* Page Background */
    --theme-page-bg: linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0284c7 70%, #0ea5e9 100%);

    /* Text Colors */
    --theme-text-primary: #f0f9ff;
    --theme-text-secondary: #e0f2fe;
    --theme-text-muted: #7dd3fc;
    --theme-text-hint: #bae6fd;
    --theme-text-danger: #f87171;
    --theme-text-success: #4ade80;
    --theme-text-warning: #fbbf24;
    --theme-text-info: #38bdf8;

    /* Header & Action Backgrounds */
    --theme-header-bg: #0c4a6e;
    --theme-bg-danger: rgba(239, 68, 68, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);

/* Surfaces & Borders */
--theme-surface: #0c4a6e;
--theme-surface-secondary: #082f49;
--theme-border: #0284c7;
    
/* Inputs */
--theme-input-bg: #082f49;
--theme-input-border: #0ea5e9;
--theme-input-text: #f0f9ff;
--theme-input-focus: #38bdf8;

    /* Buttons */
    --theme-primary: #0ea5e9;
    --theme-primary-hover: #0284c7;
    --theme-btn-text: #ffffff;
    --theme-secondary: #075985;
    --theme-secondary-hover: #0c4a6e;
    --theme-secondary-text: #e0f2fe;
    --theme-accent: #22d3d1;
    
    /* Sign-in Button */
    --theme-signin-color: #ffffff;
    --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);
    
    /* Chips/Tags */
    --theme-chip-bg: rgba(125, 211, 252, 0.15);
    --theme-chip-color: #e0f2fe;
    --theme-chip-hover-bg: rgba(125, 211, 252, 0.25);
    --theme-chip-border: rgba(125, 211, 252, 0.3);
    
    /* Links */
    --theme-link-color: #7dd3fc;
    --theme-link-hover-color: #bae6fd;
    --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Footer */
    --theme-footer-color: rgba(255, 255, 255, 0.5);
    --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
    
    /* Gradients (Flattened) */
    --theme-gradient-text: #0ea5e9;
    --theme-cta-gradient: #0284c7;
    
    /* Shadows */
    --theme-shadow-color: rgba(2, 132, 199, 0.5);
    --theme-title-shadow: 0 2px 20px rgba(7, 89, 133, 0.5);
        --theme-subtitle-shadow: 0 1px 10px rgba(7, 89, 133, 0.4);
    }

/* ============================================
   🔮 MYSTIC THEME (Dark)
   Arcane, magical, mystical energy
   Inspired by sorcery and ancient arts
   ============================================ */
.theme-mystic {
    /* Page Background - Deep mystical purple with hints of orange energy */
    --theme-page-bg: linear-gradient(180deg, #1a0a2e 0%, #16082a 20%, #2d1b4e 50%, #1a0a2e 80%, #0d0515 100%);

    /* Text Colors */
    --theme-text-primary: #faf5ff;
    --theme-text-secondary: #e9d5ff;
    --theme-text-muted: #c4b5fd;
    --theme-text-hint: #a78bfa;
    --theme-text-danger: #f87171;
    --theme-text-success: #4ade80;
    --theme-text-warning: #fb923c;
    --theme-text-info: #38bdf8;

    /* Header & Action Backgrounds */
    --theme-header-bg: #1a0a2e;
    --theme-bg-danger: rgba(239, 68, 68, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(251, 146, 60, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);

    /* Surfaces & Borders */
    --theme-surface: #2d1b4e;
    --theme-surface-secondary: #1a0a2e;
    --theme-border: #7c3aed;

    /* Inputs */
    --theme-input-bg: #1a0a2e;
    --theme-input-border: #a78bfa;
    --theme-input-text: #faf5ff;
    --theme-input-focus: #f97316;

    /* Buttons - Orange/gold magical energy */
    --theme-primary: #f97316;
    --theme-primary-hover: #ea580c;
    --theme-btn-text: #1a0a2e;
    --theme-secondary: #7c3aed;
    --theme-secondary-hover: #6d28d9;
    --theme-secondary-text: #faf5ff;
    --theme-accent: #f97316;

    /* Sign-in Button */
    --theme-signin-color: #faf5ff;
    --theme-signin-hover-bg: rgba(249, 115, 22, 0.2);

    /* Chips/Tags */
    --theme-chip-bg: rgba(249, 115, 22, 0.15);
    --theme-chip-color: #fdba74;
    --theme-chip-hover-bg: rgba(249, 115, 22, 0.25);
    --theme-chip-border: rgba(249, 115, 22, 0.4);

    /* Links */
    --theme-link-color: #c4b5fd;
    --theme-link-hover-color: #f97316;
    --theme-link-hover-bg: rgba(249, 115, 22, 0.1);

    /* Footer */
    --theme-footer-color: rgba(196, 181, 253, 0.6);
    --theme-footer-hover-color: #f97316;

    /* Gradients */
    --theme-gradient-text: linear-gradient(135deg, #f97316 0%, #fbbf24 50%, #f97316 100%);
    --theme-cta-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);

    /* Shadows - Mystical glow */
    --theme-shadow-color: rgba(249, 115, 22, 0.5);
    --theme-title-shadow: 0 0 40px rgba(249, 115, 22, 0.4), 0 0 80px rgba(124, 58, 237, 0.3);
    --theme-subtitle-shadow: 0 0 20px rgba(196, 181, 253, 0.3);
}

    /* ============================================
       🌙 PHASE 4: AUTO DARK MODE DETECTION
       Automatically applies Space theme when user's
       OS prefers dark color scheme.
   
       This only applies when no explicit theme class
       is set (default state). User's manual theme
       choice always takes precedence.
       ============================================ */
    @media (prefers-color-scheme: dark) {
        /* Apply Space theme as default dark mode */
        .public-page:not(.theme-cloud):not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) {
            /* Text Colors */
            --theme-text-primary: #f1f5f9;
            --theme-text-danger: #f87171;
            --theme-text-success: #4ade80;
            --theme-text-warning: #fbbf24;
            --theme-text-info: #38bdf8;
            --theme-text-secondary: #94a3b8;
            --theme-text-muted: #64748b;
            --theme-text-hint: #94a3b8;

            /* Header & Action Backgrounds */
            --theme-header-bg: #0f0a1e;
            --theme-bg-danger: rgba(239, 68, 68, 0.15);
            --theme-bg-success: rgba(34, 197, 94, 0.15);
            --theme-bg-warning: rgba(245, 158, 11, 0.15);
            --theme-bg-info: rgba(56, 189, 248, 0.15);

            /* Surfaces & Borders */
            --theme-surface: #1e293b;
            --theme-surface-secondary: #0f172a;
            --theme-border: #334155;
            
            /* Inputs */
            --theme-input-bg: #0f172a;
            --theme-input-border: #475569;
            --theme-input-text: #f1f5f9;
            --theme-input-focus: #a855f7;

            /* Buttons */
            --theme-primary: #a855f7;
            --theme-primary-hover: #9333ea;
            --theme-btn-text: #ffffff;
            --theme-secondary: #334155;
            --theme-secondary-hover: #475569;
            --theme-secondary-text: #f1f5f9;
            --theme-accent: #a855f7;
        
            /* Sign-in Button */
            --theme-signin-color: #ffffff;
            --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);
        
            /* Chips/Tags */
            --theme-chip-bg: rgba(168, 85, 247, 0.2);
            --theme-chip-color: #c4b5fd;
            --theme-chip-hover-bg: rgba(168, 85, 247, 0.3);
            --theme-chip-border: rgba(168, 85, 247, 0.4);
        
            /* Links */
            --theme-link-color: #64748b;
            --theme-link-hover-color: #94a3b8;
            --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
        
            /* Footer */
            --theme-footer-color: rgba(255, 255, 255, 0.5);
            --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
        
            /* Gradients (Flattened) */
            --theme-gradient-text: #a855f7;
            --theme-cta-gradient: #a855f7;
        
            /* Shadows */
            --theme-shadow-color: rgba(168, 85, 247, 0.5);
            --theme-title-shadow: 0 0 40px rgba(168, 85, 247, 0.5);
            --theme-subtitle-shadow: 0 0 20px rgba(148, 163, 184, 0.3);
        }
    }