/*
 * flask_wise - Constellation Theme
 * Deep space aesthetic with warm orange accents
 *
 * Color Palette:
 * - Deep Space Blue: #023047 (primary background)
 * - Cerulean: #126782 (secondary elements)
 * - Princeton Orange: #FB8500 (accent/highlight)
 * - White: #FFFFFF (text)
 */

/* ============================================
   ROOT VARIABLES - CONSTELLATION DARK THEME
   ============================================ */

:root, [data-theme="dark"] {
    /* Background Colors - Deep space blues */
    --bg-primary: #011627;      /* Deeper than Deep Space Blue */
    --bg-secondary: #023047;    /* Deep Space Blue */
    --bg-tertiary: #034561;     /* Between Deep Space and Cerulean */

    /* Text Colors - White with blue undertones */
    --text-primary: #FFFFFF;
    --text-secondary: #B8D4E3;
    --text-muted: #6B9AB8;

    /* Border Colors - Cerulean tones */
    --border-subtle: #0A4A60;
    --border-strong: #126782;   /* Cerulean */

    /* Accent Colors - Princeton Orange */
    --accent-wise: #FB8500;
    --accent-wise-hover: #FFA033;
    --accent-wise-light: rgba(251, 133, 0, 0.2);

    /* Secondary accent - Cerulean */
    --accent-secondary: #126782;
    --accent-tertiary: #1A8AAB;

    /* Status Colors - Harmonized with palette */
    --status-operational: #00C896;   /* Teal green */
    --status-warning: #FB8500;       /* Princeton Orange */
    --status-critical: #FF4757;      /* Warm red */
    --status-offline: #3D5A6E;       /* Muted blue-gray */

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;

    /* Type Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 3rem;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Border Radius - Smooth, modern curves */
    --radius-sharp: 0px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Shadows - Warm orange glow */
    --shadow-sm: 0 2px 4px rgba(2, 48, 71, 0.4);
    --shadow-md: 0 4px 12px rgba(2, 48, 71, 0.5);
    --shadow-lg: 0 8px 24px rgba(2, 48, 71, 0.6);
    --shadow-glow: 0 0 20px rgba(251, 133, 0, 0.3);

    /* Login Card - Light card on dark background */
    --login-card-bg: rgba(200, 220, 235, 0.95);
    --login-card-border: rgba(18, 103, 130, 0.3);
    --login-card-title: #023047;
    --login-card-subtitle: #126782;
    --login-card-divider: #5A8CA3;
    --login-card-footer: #3D5A6E;

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

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ============================================
   LIGHT THEME - Constellation Day
   ============================================ */

[data-theme="light"] {
    /* Background Colors - Soft whites with blue tint */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0F7FA;
    --bg-tertiary: #E5F0F5;

    /* Text Colors - Deep Space Blue */
    --text-primary: #023047;
    --text-secondary: #126782;
    --text-muted: #5A8CA3;

    /* Border Colors */
    --border-subtle: #D0E3ED;
    --border-strong: #A8C8D8;

    /* Accent stays the same */
    --accent-wise-light: rgba(251, 133, 0, 0.12);

    /* Shadows - Softer for light theme */
    --shadow-sm: 0 2px 4px rgba(2, 48, 71, 0.08);
    --shadow-md: 0 4px 12px rgba(2, 48, 71, 0.12);
    --shadow-lg: 0 8px 24px rgba(2, 48, 71, 0.16);
    --shadow-glow: 0 0 20px rgba(251, 133, 0, 0.2);
}

/* ============================================
   CONSTELLATION GLOW EFFECTS
   ============================================ */

/* Accent elements get a subtle orange glow */
.btn-primary:not(:disabled),
.analyze-btn:not(:disabled) {
    box-shadow: 0 2px 8px rgba(251, 133, 0, 0.3);
}

.btn-primary:hover:not(:disabled),
.analyze-btn:hover:not(:disabled) {
    box-shadow: 0 4px 16px rgba(251, 133, 0, 0.4);
}

/* Badge glow */
.upload-badge,
.methodology-badge {
    box-shadow: 0 0 12px rgba(251, 133, 0, 0.25);
}

/* Progress bar - orange warmth */
.progress-bar {
    background: linear-gradient(90deg, #FB8500, #FFA033);
    box-shadow: 0 0 8px rgba(251, 133, 0, 0.4);
}

/* Card hover - subtle lift with cerulean border */
.upload-card:hover,
.config-card:hover,
.chart-card:hover {
    border-color: var(--accent-secondary);
    box-shadow: 0 8px 24px rgba(2, 48, 71, 0.4);
}

/* Links - Orange accent */
a:not(.nav-link):not(.btn) {
    color: var(--accent-wise);
}

a:not(.nav-link):not(.btn):hover {
    color: var(--accent-wise-hover);
}

/* ============================================
   CONSTELLATION GRADIENTS
   ============================================ */

/* Optional gradient backgrounds */
.constellation-gradient {
    background: linear-gradient(135deg, #011627 0%, #023047 50%, #034561 100%);
}

.constellation-gradient-accent {
    background: linear-gradient(135deg, #023047 0%, #126782 100%);
}

/* Navbar enhancement */
.navbar,
.topbar {
    background: linear-gradient(180deg, #023047 0%, #011627 100%);
    border-bottom: 1px solid rgba(18, 103, 130, 0.3);
}

/* Sidebar enhancement */
.sidebar,
.nav-sidebar {
    background: linear-gradient(180deg, #011627 0%, #023047 100%);
}

/* ============================================
   CONSTELLATION CHAT WIDGET
   ============================================ */

/* Chat bubble - orange accent */
.chat-bubble,
.wise-chat-bubble {
    background: var(--accent-wise);
    box-shadow: 0 4px 16px rgba(251, 133, 0, 0.4);
}

.chat-bubble:hover,
.wise-chat-bubble:hover {
    background: var(--accent-wise-hover);
    box-shadow: 0 6px 20px rgba(251, 133, 0, 0.5);
}

/* Chat container - deep space background */
.chat-container,
.wise-chat-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
}

/* Chat header - cerulean gradient */
.chat-header,
.wise-chat-header {
    background: linear-gradient(135deg, #126782 0%, #0A4A60 100%);
}

/* User messages - cerulean tint */
.message-user .message-content {
    background: var(--accent-secondary);
    color: #FFFFFF;
}

/* Assistant messages - deep space blue */
.message-assistant .message-content {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
}

/* ============================================
   THEME TRANSITION
   ============================================ */

html {
    transition: background-color var(--transition-base), color var(--transition-base);
}

* {
    transition: color var(--transition-base),
                background-color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

html.theme-transitioning * {
    transition: none !important;
}