/* ============================================
   DESIGN TOKENS & CSS VARIABLES
   ============================================ */

/* Import Premium Typography */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Montserrat:wght@700;800;900&display=swap');

:root {
    /* Brand Colors */
    --primary-blue: #536DFE;
    --primary-blue-light: #7C94FF;
    --primary-blue-dark: #3D5AFE;
    --primary-blue-glow: rgba(83, 109, 254, 0.4);

    /* Light Theme (Default) */
    --bg-main: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F1F5F9;
    --bg-card: #FFFFFF;
    --border-color: rgba(0, 0, 0, 0.08);

    /* Text Colors - Light */
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #536DFE 0%, #7C94FF 100%);
    --gradient-bg: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);

    /* Typography */
    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;

    /* Spacing Scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 40px var(--primary-blue-glow);

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme Class */
.dark-theme {
    --bg-main: #0F172A;
    --bg-surface: #1E293B;
    --bg-elevated: #334155;
    --bg-card: rgba(30, 41, 59, 0.7);
    --border-color: rgba(255, 255, 255, 0.1);

    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;

    --gradient-bg: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.5);
}

/* ============================================
   PREMIUM SWITCH COMPONENT
   ============================================ */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    transition: .4s;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.dark-theme .slider {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

input:checked+.slider:before {
    transform: translateX(20px);
}