/* ============================================
   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);

    /* Dark Theme */
    --dark-bg: #0D0D0D;
    --dark-surface: #212121;
    --dark-elevated: #2A2A2A;
    --dark-card: #1A1A1A;

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --text-muted: #707070;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #536DFE 0%, #7C94FF 100%);
    --gradient-dark: linear-gradient(180deg, #0D0D0D 0%, #212121 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(33, 33, 33, 0.95) 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.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.4);
    --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);
}

/* ============================================
   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(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 24px;
    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);
}