/* ==========================================
   PROFESSIONAL UI/UX THEME
   Based on modern tech design - Blue/Cyan palette
   ========================================== */

:root {
    /* ===== PRIMARY COLORS (Cyan/Blue) ===== */
    --color-primary: #06B6D4;
    --color-primary-hover: #0891B2;
    --color-primary-light: rgba(6, 182, 212, 0.1);

    /* ===== DEFAULT MODE (Dark Blue Professional) ===== */
    --bg-primary: #0d1b2a;
    --bg-secondary: #1b263b;
    --bg-tertiary: #2a3f5f;
    --bg-elevated: #34527a;

    --text-primary: #E8EEF5;
    --text-secondary: #B8C5D6;
    --text-tertiary: #8A9FB5;
    --text-muted: #6B7F95;
    --text-inverse: #0d1b2a;

    --border-light: rgba(6, 182, 212, 0.25);
    --border-medium: rgba(6, 182, 212, 0.4);
    --border-dark: rgba(6, 182, 212, 0.6);

    /* ===== SHADOWS (Strong depth) ===== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.7);

    /* ===== SEMANTIC COLORS ===== */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #06B6D4;

    /* ===== INTERACTIVE STATES ===== */
    --hover-overlay: rgba(6, 182, 212, 0.05);
    --active-overlay: rgba(6, 182, 212, 0.1);
    --focus-ring: rgba(6, 182, 212, 0.3);

    /* ===== SPACING (8px grid) ===== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ===== TYPOGRAPHY ===== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Inter', sans-serif;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== DARK MODE (Extra Dark) ===== */
[data-theme="dark"] {
    --bg-primary: #030712;
    --bg-secondary: #0a0f1a;
    --bg-tertiary: #111827;
    --bg-elevated: #1a2332;

    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary: #9CA3AF;
    --text-muted: #6B7280;
    --text-inverse: #030712;

    --border-light: rgba(6, 182, 212, 0.2);
    --border-medium: rgba(6, 182, 212, 0.35);
    --border-dark: rgba(6, 182, 212, 0.5);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.8);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.9);

    --hover-overlay: rgba(6, 182, 212, 0.1);
    --active-overlay: rgba(6, 182, 212, 0.2);
    --focus-ring: rgba(6, 182, 212, 0.5);

    --color-primary-light: rgba(6, 182, 212, 0.2);
}

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

*:focus,
*:active,
button:active,
input:focus,
textarea:focus,
select:focus {
    transition: none;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
    width: 48px;
    height: 26px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-full);
    cursor: pointer;
    position: relative;
    padding: 2px;
    transition: all var(--transition-base);
}

.theme-toggle:hover {
    border-color: var(--color-primary);
    background: var(--hover-overlay);
}

.theme-toggle-slider {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    transition: transform var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    left: 2px;
    top: 2px;
}

[data-theme="dark"] .theme-toggle-slider {
    transform: translateX(22px);
}

.theme-toggle-slider::before {
    content: '☀️';
}

[data-theme="dark"] .theme-toggle-slider::before {
    content: '🌙';
}