/* ============================================
   CSS Variables - Theme System
   ============================================ */

:root {
    /* Light Mode Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f5f5f5;
    --bg-elevated: rgba(255, 255, 255, 0.95);

    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-tertiary: #adb5bd;
    --text-on-brand: #ffffff;

    --border-primary: #dee2e6;
    --border-secondary: #e9ecef;
    --border-focus: #667eea;

    --brand-primary: #667eea;
    --brand-secondary: #764ba2;
    --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    --accent-success: #28a745;
    --accent-success-hover: #218838;
    --accent-danger: #dc3545;
    --accent-danger-hover: #c82333;
    --accent-warning: #ffc107;
    --accent-info: #007bff;
    --accent-info-hover: #0056b3;

    --message-user-bg: #007bff;
    --message-assistant-bg: #e9ecef;
    --message-assistant-text: #333333;
    --message-system-bg: #ffeeba;
    --message-system-text: #856404;

    --code-bg: #f6f8fa;
    --code-inline-bg: #f0f0f0;
    --code-border: #e1e4e8;

    --edit-proposal-border: #ffc107;
    --edit-proposal-bg: #fffdf0;

    --modal-overlay: rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(31, 38, 135, 0.15);

    --hover-overlay: rgba(0, 0, 0, 0.04);

    /* Login specific */
    --login-card-bg: rgba(255, 255, 255, 0.95);
    --login-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
}

[data-theme="dark"] {
    /* Dark Mode Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #0d0d0d;
    --bg-elevated: rgba(45, 45, 45, 0.95);

    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --text-tertiary: #6c757d;
    --text-on-brand: #ffffff;

    --border-primary: #404040;
    --border-secondary: #333333;
    --border-focus: #8b9bff;

    --brand-primary: #8b9bff;
    --brand-secondary: #a78bfa;
    --brand-gradient: linear-gradient(135deg, #8b9bff 0%, #a78bfa 100%);

    --accent-success: #34d058;
    --accent-success-hover: #28a745;
    --accent-danger: #f85149;
    --accent-danger-hover: #dc3545;
    --accent-warning: #f0ad4e;
    --accent-info: #4d9cff;
    --accent-info-hover: #3a8bef;

    --message-user-bg: #4d9cff;
    --message-assistant-bg: #2d2d2d;
    --message-assistant-text: #e9ecef;
    --message-system-bg: #3d3316;
    --message-system-text: #f0ad4e;

    --code-bg: #161b22;
    --code-inline-bg: #2d2d2d;
    --code-border: #30363d;

    --edit-proposal-border: #f0ad4e;
    --edit-proposal-bg: #2d2516;

    --modal-overlay: rgba(0, 0, 0, 0.75);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

    --hover-overlay: rgba(255, 255, 255, 0.06);

    /* Login specific - darker gradient for dark mode */
    --login-card-bg: rgba(45, 45, 45, 0.95);
    --login-gradient: linear-gradient(135deg, #1a1a2e 0%, #2d1b3d 100%);
}

/* Smooth transitions on theme change */
*,
*::before,
*::after {
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal),
                box-shadow var(--transition-normal);
}

/* Disable transitions on elements that shouldn't animate */
input,
textarea,
button,
select {
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}

/* Base Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}