/* FlyFun Design System - CSS Variables Only */

/* ===== Light Theme (Default) ===== */
:root {
    /* Colors */
    --primary-color: #4f46e5; /* Indigo 600 */
    --primary-hover: #4338ca; /* Indigo 700 */
    --secondary-color: #64748b; /* Slate 500 */
    --accent-color: #0ea5e9; /* Sky 500 */
    --success-color: #10b981; /* Emerald 500 */
    --warning-color: #f59e0b; /* Amber 500 */
    --danger-color: #ef4444; /* Red 500 */

    /* Backgrounds */
    --bg-color: #f8fafc; /* Slate 50 */
    --surface-color: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);

    /* Text */
    --text-primary: #1e293b; /* Slate 800 */
    --text-secondary: #64748b; /* Slate 500 */
    --text-light: #94a3b8; /* Slate 400 */

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

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;

    /* Gradient colors */
    --gradient-start: #667eea;
    --gradient-end: #764ba2;

    /* Borders and inputs */
    --border-color: #e2e8f0; /* Slate 200 */
    --input-bg: #ffffff;
    --input-border: #e9ecef;
    --hover-bg: rgba(0, 0, 0, 0.05);

    /* Component-specific colors */
    --thinking-bg: #fff9e6;
    --thinking-bg-header: #fffbf0;
    --thinking-bg-hover: #fff5d6;
    --thinking-border: #ffc107;
    --thinking-border-light: #fde68a;
    --thinking-text: #92400e;
    --thinking-text-content: #78350f;
    --thinking-icon: #f59e0b;

    --suggestion-bg: #e3f2fd;
    --suggestion-border: #1976d2;
    --suggestion-text: #1565c0;
    --suggestion-btn-bg: white;
    --suggestion-btn-border: #bbdefb;
    --suggestion-btn-hover: #f5f5f5;

    --message-assistant-bg: #f1f3f5;
    --message-assistant-text: #212529;

    --quick-action-bg: #f8f9fa;
    --quick-action-border: #e9ecef;

    --scrollbar-thumb: #dee2e6;
    --scrollbar-thumb-hover: #cbd3da;

    --code-bg: rgba(0, 0, 0, 0.1);
    --link-color: #1976d2;
    --link-hover: #1565c0;
    --link-visited: #7b1fa2;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
    /* Colors - adjusted for dark mode */
    --primary-color: #818cf8; /* Indigo 400 - brighter for dark bg */
    --primary-hover: #6366f1; /* Indigo 500 */
    --secondary-color: #94a3b8; /* Slate 400 */
    --accent-color: #38bdf8; /* Sky 400 */
    --success-color: #34d399; /* Emerald 400 */
    --warning-color: #fbbf24; /* Amber 400 */
    --danger-color: #f87171; /* Red 400 */

    /* Backgrounds - dark surfaces */
    --bg-color: #0f172a; /* Slate 900 */
    --surface-color: #1e293b; /* Slate 800 */
    --glass-bg: rgba(30, 41, 59, 0.85); /* Slate 800 with transparency */
    --glass-border: rgba(51, 65, 85, 0.5); /* Slate 700 with transparency */

    /* Text - light on dark */
    --text-primary: #f1f5f9; /* Slate 100 */
    --text-secondary: #94a3b8; /* Slate 400 */
    --text-light: #64748b; /* Slate 500 */

    /* Shadows - subtler in dark mode */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    /* Borders and inputs */
    --border-color: #334155; /* Slate 700 */
    --input-bg: #1e293b; /* Slate 800 */
    --input-border: #475569; /* Slate 600 */
    --hover-bg: rgba(255, 255, 255, 0.05);

    /* Gradient colors for buttons/accents */
    --gradient-start: #818cf8; /* Indigo 400 */
    --gradient-end: #a78bfa; /* Violet 400 */

    /* Component-specific colors */
    --thinking-bg: #422006;
    --thinking-bg-header: #451a03;
    --thinking-bg-hover: #4a1f06;
    --thinking-border: #d97706;
    --thinking-border-light: #92400e;
    --thinking-text: #fbbf24;
    --thinking-text-content: #fcd34d;
    --thinking-icon: #f59e0b;

    --suggestion-bg: #1e3a5f;
    --suggestion-border: #3b82f6;
    --suggestion-text: #60a5fa;
    --suggestion-btn-bg: #1e293b;
    --suggestion-btn-border: #334155;
    --suggestion-btn-hover: #334155;

    --message-assistant-bg: #334155;
    --message-assistant-text: #f1f5f9;

    --quick-action-bg: #1e293b;
    --quick-action-border: #334155;

    --scrollbar-thumb: #475569;
    --scrollbar-thumb-hover: #64748b;

    --code-bg: rgba(255, 255, 255, 0.1);
    --link-color: #60a5fa;
    --link-hover: #93c5fd;
    --link-visited: #c4b5fd;
}

/* ===== Override Bootstrap classes for dark mode ===== */
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-light);
}

/* Labels */
[data-theme="dark"] label {
    color: var(--text-primary);
}

/* Tables */
[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--border-color);
}

/* Info cards and detail sections */
[data-theme="dark"] .info-card {
    background-color: var(--surface-color);
    color: var(--text-primary);
}

[data-theme="dark"] .info-card h6 {
    color: var(--text-secondary);
}

[data-theme="dark"] .airport-detail-section {
    color: var(--text-primary);
}

[data-theme="dark"] .airport-detail-section h6 {
    color: var(--text-primary);
}

/* Theme-aware logo switching */
[data-theme="dark"] .logo-light {
    display: none !important;
}

[data-theme="dark"] .logo-dark {
    display: inline-block !important;
}