/**
 * ChatAnd Theme System
 * Modern color palettes with grayscale base + accent colors
 * 5 theme variants: Default, Ocean, Sunset, Forest, Violet
 */

/* ========================================
   ROOT DESIGN TOKENS (Default Theme)
   ======================================== */
:root {
    /* Theme: Default - Professional Blue */
    --theme-name: 'default';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F3F4F6;

    /* Text Colors */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-inverse: #FFFFFF;

    /* Accent Color (Blue) */
    --accent-primary: #3B82F6;
    --accent-secondary: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-light: #DBEAFE;

    /* Message Bubbles */
    --bubble-user-from: #3B82F6;
    --bubble-user-to: #2563EB;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F3F4F6;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-color: #E5E7EB;
    --border-light: #F3F4F6;
    --border-focus: #3B82F6;

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

    /* Spacing System */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* Typography */
    --font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;

    --line-height-tight: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* Z-index Scale */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-tooltip: 50;
}

/* ========================================
   THEME: DEFAULT (Explicit selector)
   ======================================== */
[data-theme="default"] {
    /* Same as :root - Professional Blue */
    --theme-name: 'default';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F3F4F6;

    /* Text Colors */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-inverse: #FFFFFF;

    /* Accent Color (Blue) */
    --accent-primary: #3B82F6;
    --accent-secondary: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-light: #DBEAFE;

    /* Message Bubbles */
    --bubble-user-from: #3B82F6;
    --bubble-user-to: #2563EB;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F3F4F6;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-color: #E5E7EB;
    --border-light: #F3F4F6;
    --border-focus: #3B82F6;
}

/* ========================================
   THEME: OCEAN (Teal/Cyan)
   ======================================== */
[data-theme="ocean"] {
    --theme-name: 'ocean';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0FDFA;
    --bg-tertiary: #CCFBF1;

    /* Accent Color (Teal) */
    --accent-primary: #14B8A6;
    --accent-secondary: #0D9488;
    --accent-hover: #0F766E;
    --accent-light: #CCFBF1;

    /* Message Bubbles */
    --bubble-user-from: #14B8A6;
    --bubble-user-to: #0D9488;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #ECFEFF;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #14B8A6;
}

/* ========================================
   THEME: SUNSET (Coral/Orange)
   ======================================== */
[data-theme="sunset"] {
    --theme-name: 'sunset';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FFF7ED;
    --bg-tertiary: #FFEDD5;

    /* Accent Color (Coral) */
    --accent-primary: #FB923C;
    --accent-secondary: #F97316;
    --accent-hover: #EA580C;
    --accent-light: #FFEDD5;

    /* Message Bubbles */
    --bubble-user-from: #FB923C;
    --bubble-user-to: #F97316;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #FEF3C7;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #FB923C;
}

/* ========================================
   THEME: FOREST (Green)
   ======================================== */
[data-theme="forest"] {
    --theme-name: 'forest';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0FDF4;
    --bg-tertiary: #DCFCE7;

    /* Accent Color (Emerald) */
    --accent-primary: #10B981;
    --accent-secondary: #059669;
    --accent-hover: #047857;
    --accent-light: #D1FAE5;

    /* Message Bubbles */
    --bubble-user-from: #10B981;
    --bubble-user-to: #059669;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #DCFCE7;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #10B981;
}

/* ========================================
   THEME: VIOLET (Purple)
   ======================================== */
[data-theme="violet"] {
    --theme-name: 'violet';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FAF5FF;
    --bg-tertiary: #F3E8FF;

    /* Accent Color (Purple) */
    --accent-primary: #A855F7;
    --accent-secondary: #9333EA;
    --accent-hover: #7E22CE;
    --accent-light: #F3E8FF;

    /* Message Bubbles */
    --bubble-user-from: #A855F7;
    --bubble-user-to: #9333EA;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F3E8FF;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #A855F7;
}

/* ========================================
   SMOOTH THEME TRANSITIONS
   ======================================== */
body {
    transition: background-color var(--transition-base),
                color var(--transition-base);
}

/* Specific selectors for theme transitions - NO WILDCARD */
.boxChat,
.boxChatContainer,
.UserMessage,
.UserMessageContent,
.BotUser,
.BotUserContent,
.composer-btn,
.chat-input,
.message-composer,
.popup-content,
.selected-file-item {
    transition: border-color var(--transition-fast),
                background-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* Prevent transition on page load */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background Colors */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--accent-primary); }

/* Accent Background */
.bg-accent { background-color: var(--accent-primary); }
.bg-accent-light { background-color: var(--accent-light); }

/* Border */
.border { border: 1px solid var(--border-color); }
.border-accent { border-color: var(--accent-primary); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }