/* ============================================
   VIVIANA CHAT - THEME PLUGIN SYSTEM
   Design Capabilities Enhancement
   ============================================ */

/* Base Theme Variables (Dark Mode – permanent) */
:root {
    /* Primary Colors */
    --primary-color: #E91E63;
    --primary-dark: #C2185B;
    --primary-light: #F06292;
    --secondary-color: #7C4DFF;

    /* Background Colors */
    --bg-gradient: linear-gradient(135deg, #1a0a2e 0%, #0d0a1e 100%);
    --bg-primary: #0D0A0F;
    --bg-secondary: #161218;
    --bg-tertiary: #1C1620;
    --bg-input: #201A26;
    --bg-bubble-received: linear-gradient(135deg, #1C1428 0%, #201830 100%);
    --bg-bubble-sent: linear-gradient(135deg, #E91E63 0%, #D81558 50%, #C2185B 100%);

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --text-tertiary: #808080;
    --text-muted: #666666;

    /* UI Elements */
    --border-color: #2E2433;
    --border-light: #382C40;
    --success-color: #66BB6A;
    --error-color: #EF5350;
    --warning-color: #FFA726;
    --info-color: #42A5F5;

    /* Shadows */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 8px 40px rgba(0, 0, 0, 0.9);
    --shadow-soft: 0 2px 16px rgba(233, 30, 99, 0.08);
    --shadow-glow: 0 0 28px rgba(233, 30, 99, 0.18);

    /* Borders & Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Avatar Gradient */
    --avatar-gradient: linear-gradient(135deg, #E91E63 0%, #7C4DFF 100%);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* App Surface Colors */
    --app-bg: #0D0A0F;
    --app-surface: #161218;
    --app-surface-2: #1C1620;
    --app-surface-3: #130F16;
    --app-border: #2E2433;
    --app-border-subtle: #1E1824;
    --app-text: #ffffff;
    --app-text-secondary: #B0B0B0;
    --app-text-muted: #666666;
    --app-text-faded: #444444;
    --app-msg-received: #1C1428;
    --app-scrollbar: #3A2E42;
    --app-scrollbar-hover: #4A3E52;
    --app-nav-active: #E91E63;

    /* Accent helpers (alias primary) */
    --accent: #E91E63;
    --accent-primary: #E91E63;
    --accent-secondary: #F06292;
    --accent-light: rgba(233, 30, 99, 0.10);
    --accent-glow: rgba(233, 30, 99, 0.20);

    /* Status Colors */
    --status-online: #66BB6A;
    --status-unread: #7C4DFF;
    --status-quiz: #FFA726;
}

/* ============================================
   THEME 1: DARK MODE (reinforcement – same as :root)
   ============================================ */
[data-theme="dark"] {
    --primary-color: #E91E63;
    --primary-dark: #C2185B;
    --primary-light: #F06292;
    --secondary-color: #7C4DFF;
    --bg-gradient: linear-gradient(135deg, #1a0a2e 0%, #0d0a1e 100%);
    --bg-primary: #0D0A0F;
    --bg-secondary: #161218;
    --bg-tertiary: #1C1620;
    --bg-input: #201A26;
    --bg-bubble-received: linear-gradient(135deg, #1C1428 0%, #201830 100%);
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --text-tertiary: #808080;
    --border-color: #2E2433;
    --border-light: #382C40;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 8px 40px rgba(0, 0, 0, 0.9);
    --avatar-gradient: linear-gradient(135deg, #E91E63 0%, #7C4DFF 100%);
    --app-bg: #0D0A0F;
    --app-surface: #161218;
    --app-surface-2: #1C1620;
    --app-surface-3: #130F16;
    --app-border: #2E2433;
    --app-border-subtle: #1E1824;
    --app-text: #ffffff;
    --app-text-secondary: #B0B0B0;
    --app-text-muted: #666666;
    --app-text-faded: #444444;
    --app-msg-received: #1C1428;
    --app-scrollbar: #3A2E42;
    --app-scrollbar-hover: #4A3E52;
    --app-nav-active: #E91E63;
    --accent: #E91E63;
    --accent-primary: #E91E63;
    --accent-secondary: #F06292;
    --accent-light: rgba(233, 30, 99, 0.10);
    --accent-glow: rgba(233, 30, 99, 0.20);
}

/* ============================================
   THEME 2: ROMANTIC PINK
   ============================================ */
[data-theme="romantic"] {
    /* Primary Colors */
    --primary-color: #FF1744;
    --primary-dark: #D50000;
    --primary-light: #FFD1DC;
    --secondary-color: #FF4081;

    /* Background Colors */
    --bg-gradient: linear-gradient(135deg, #ffeef8 0%, #ffcce5 100%);
    --bg-primary: #FFFCFE;
    --bg-secondary: #FFF0F5;
    --bg-tertiary: #FFE4F0;

    /* Text Colors */
    --text-primary: #2D1B2E;
    --text-secondary: #7D5A7F;
    --text-tertiary: #A584A7;

    /* UI Elements */
    --border-color: #FFD1E3;
    --success-color: #FF6B9D;
    --error-color: #D81B60;
    --warning-color: #FF80AB;
    --info-color: #F48FB1;

    /* Avatar Gradient */
    --avatar-gradient: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
}

/* ============================================
   THEME 3: MODERN BLUE
   ============================================ */
[data-theme="modern"] {
    /* Primary Colors */
    --primary-color: #2196F3;
    --primary-dark: #1976D2;
    --primary-light: #BBDEFB;
    --secondary-color: #00BCD4;

    /* Background Colors */
    --bg-gradient: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F9FC;
    --bg-tertiary: #E8F4F8;

    /* Text Colors */
    --text-primary: #0D47A1;
    --text-secondary: #546E7A;
    --text-tertiary: #90A4AE;

    /* UI Elements */
    --border-color: #B3E5FC;
    --success-color: #26A69A;
    --error-color: #EF5350;
    --warning-color: #FFA726;
    --info-color: #29B6F6;

    /* Avatar Gradient */
    --avatar-gradient: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
}

/* ============================================
   THEME 4: MINIMALIST GREY
   ============================================ */
[data-theme="minimalist"] {
    /* Primary Colors */
    --primary-color: #424242;
    --primary-dark: #212121;
    --primary-light: #BDBDBD;
    --secondary-color: #616161;

    /* Background Colors */
    --bg-gradient: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    --bg-primary: #FFFFFF;
    --bg-secondary: #FAFAFA;
    --bg-tertiary: #F5F5F5;

    /* Text Colors */
    --text-primary: #212121;
    --text-secondary: #757575;
    --text-tertiary: #9E9E9E;

    /* UI Elements */
    --border-color: #E0E0E0;
    --success-color: #66BB6A;
    --error-color: #EF5350;
    --warning-color: #FFA726;
    --info-color: #42A5F5;

    /* Avatar Gradient */
    --avatar-gradient: linear-gradient(135deg, #757575 0%, #424242 100%);
}

/* ============================================
   THEME 5: SUNSET ORANGE
   ============================================ */
[data-theme="sunset"] {
    /* Primary Colors */
    --primary-color: #FF5722;
    --primary-dark: #E64A19;
    --primary-light: #FFCCBC;
    --secondary-color: #FF9800;

    /* Background Colors */
    --bg-gradient: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    --bg-primary: #FFFAF5;
    --bg-secondary: #FFF8E1;
    --bg-tertiary: #FFECB3;

    /* Text Colors */
    --text-primary: #3E2723;
    --text-secondary: #6D4C41;
    --text-tertiary: #8D6E63;

    /* UI Elements */
    --border-color: #FFE0B2;
    --success-color: #66BB6A;
    --error-color: #EF5350;
    --warning-color: #FFA726;
    --info-color: #42A5F5;

    /* Avatar Gradient */
    --avatar-gradient: linear-gradient(135deg, #ff7043 0%, #ff5722 100%);
}

/* ============================================
   THEME 6: OCEAN TEAL
   ============================================ */
[data-theme="ocean"] {
    /* Primary Colors */
    --primary-color: #00897B;
    --primary-dark: #00695C;
    --primary-light: #B2DFDB;
    --secondary-color: #00ACC1;

    /* Background Colors */
    --bg-gradient: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    --bg-primary: #F0FFFE;
    --bg-secondary: #E0F7F5;
    --bg-tertiary: #B2EBF2;

    /* Text Colors */
    --text-primary: #004D40;
    --text-secondary: #00695C;
    --text-tertiary: #00897B;

    /* UI Elements */
    --border-color: #B2DFDB;
    --success-color: #26A69A;
    --error-color: #EF5350;
    --warning-color: #FFA726;
    --info-color: #00ACC1;

    /* Avatar Gradient */
    --avatar-gradient: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
}

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

/* ============================================
   PLAYFUL BACKGROUND PATTERN (dark mode)
   ============================================ */
body {
    background-color: #0D0A0F;
    background-image:
        /* Pink glow – top left */
        radial-gradient(ellipse at 12% 8%, rgba(233, 30, 99, 0.14) 0%, transparent 48%),
        /* Purple glow – bottom right */
        radial-gradient(ellipse at 88% 92%, rgba(124, 77, 255, 0.12) 0%, transparent 48%),
        /* Pink hint – top right */
        radial-gradient(ellipse at 78% 15%, rgba(233, 30, 99, 0.07) 0%, transparent 35%),
        /* Purple hint – bottom left */
        radial-gradient(ellipse at 18% 88%, rgba(124, 77, 255, 0.07) 0%, transparent 35%),
        /* Subtle dot grid */
        radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        26px 26px;
    background-attachment: fixed;
}

[data-theme="light"] body {
    background-color: #FFFCFE;
    background-image:
        radial-gradient(ellipse at 12% 8%, rgba(233, 30, 99, 0.07) 0%, transparent 48%),
        radial-gradient(ellipse at 88% 92%, rgba(124, 77, 255, 0.06) 0%, transparent 48%),
        radial-gradient(circle, rgba(233, 30, 99, 0.06) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 26px 26px;
    background-attachment: fixed;
}

* {
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
}

/* Preserve specific transitions */
.btn-primary,
.btn-secondary,
.btn-google,
.nav-item,
.message,
.quiz-choice {
    transition: all var(--transition-normal) !important;
}

/* ============================================
   THEME-AWARE COMPONENTS
   ============================================ */

/* Update scrollbar for dark themes */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Update shadows for dark theme */
[data-theme="dark"] .shadow,
[data-theme="dark"] .card,
[data-theme="dark"] .message-bubble {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}