/* =========================================================
   SSP ENTERPRISE VARIABLES
   Security Sales Perú
   Premium Dark Tech UI
========================================================= */

:root {

    /* =====================================================
       PRIMARY COLORS
    ===================================================== */

    --ssp-primary: #ff6b00;
    --ssp-primary-light: #ff8533;
    --ssp-primary-dark: #cc5500;

    --ssp-secondary: #07142b;
    --ssp-secondary-light: #0d1f3f;

    --ssp-dark: #050816;
    --ssp-dark-soft: #08101f;
    --ssp-dark-card: #0b1529;
    --ssp-dark-glass: rgba(10, 18, 35, 0.72);

    --ssp-white: #ffffff;
    --ssp-light: #f4f6f9;
    --ssp-gray: #9ca3af;
    --ssp-gray-soft: #cbd5e1;

    /* =====================================================
       GLOW COLORS
    ===================================================== */

    --ssp-glow-orange:
        0 0 5px rgba(255, 107, 0, 0.35),
        0 0 10px rgba(255, 107, 0, 0.25),
        0 0 20px rgba(255, 107, 0, 0.15);

    --ssp-glow-blue:
        0 0 5px rgba(0, 153, 255, 0.25),
        0 0 10px rgba(0, 153, 255, 0.18),
        0 0 20px rgba(0, 153, 255, 0.12);

    --ssp-glow-white:
        0 0 5px rgba(255,255,255,0.15),
        0 0 12px rgba(255,255,255,0.10);

    /* =====================================================
       BACKGROUNDS
    ===================================================== */

    --bg-main:
        linear-gradient(
            180deg,
            #050816 0%,
            #07142b 45%,
            #050816 100%
        );

    --bg-card:
        linear-gradient(
            145deg,
            rgba(10,18,35,0.95),
            rgba(6,12,24,0.92)
        );

    --bg-glass:
        rgba(255,255,255,0.04);

    --bg-glass-hover:
        rgba(255,255,255,0.08);

    /* =====================================================
       BORDERS
    ===================================================== */

    --border-color:
        rgba(255,255,255,0.08);

    --border-glow:
        rgba(255,107,0,0.35);

    --border-soft:
        rgba(255,255,255,0.04);

    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow-sm:
        0 2px 10px rgba(0,0,0,0.20);

    --shadow-md:
        0 8px 24px rgba(0,0,0,0.28);

    --shadow-lg:
        0 18px 45px rgba(0,0,0,0.45);

    --shadow-orange:
        0 0 20px rgba(255,107,0,0.18);

    --shadow-blue:
        0 0 30px rgba(0,153,255,0.12);

    /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    --font-primary:
        'Inter',
        'Segoe UI',
        sans-serif;

    --font-secondary:
        'Poppins',
        sans-serif;

    --font-title:
        'Montserrat',
        sans-serif;

    /* =====================================================
       FONT SIZES
    ===================================================== */

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.35rem;
    --fs-2xl: 2rem;
    --fs-3xl: 3rem;
    --fs-4xl: 4rem;
    --fs-5xl: 5rem;

    /* =====================================================
       FONT WEIGHTS
    ===================================================== */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* =====================================================
       LINE HEIGHTS
    ===================================================== */

    --lh-sm: 1.2;
    --lh-md: 1.5;
    --lh-lg: 1.8;

    /* =====================================================
       SPACING
    ===================================================== */

    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;
    --space-4xl: 7rem;

    /* =====================================================
       BORDER RADIUS
    ===================================================== */

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-full: 999px;

    /* =====================================================
       TRANSITIONS
    ===================================================== */

    --transition-fast:
        all 0.25s ease;

    --transition-medium:
        all 0.4s ease;

    --transition-slow:
        all 0.7s ease;

    /* =====================================================
       BLUR EFFECTS
    ===================================================== */

    --blur-sm: blur(6px);
    --blur-md: blur(12px);
    --blur-lg: blur(20px);

    /* =====================================================
       Z-INDEX
    ===================================================== */

    --z-background: -1;
    --z-normal: 1;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-fixed: 500;
    --z-modal: 1000;
    --z-loader: 9999;

    /* =====================================================
       CONTAINERS
    ===================================================== */

    --container-width: 1400px;
    --container-padding: 0 2rem;

    /* =====================================================
       NAVBAR
    ===================================================== */

    --navbar-height: 90px;
    --navbar-bg:
        rgba(5, 8, 22, 0.78);

    --navbar-border:
        rgba(255,255,255,0.08);

    /* =====================================================
       BUTTONS
    ===================================================== */

    --btn-primary-bg:
        linear-gradient(
            135deg,
            #ff6b00,
            #ff8533
        );

    --btn-secondary-bg:
        rgba(255,255,255,0.04);

    --btn-hover-transform:
        translateY(-3px);

    /* =====================================================
       CARDS
    ===================================================== */

    --card-padding: 2rem;

    --card-border:
        1px solid rgba(255,255,255,0.06);

    --card-hover-border:
        1px solid rgba(255,107,0,0.35);

    --card-hover-transform:
        translateY(-8px);

    /* =====================================================
       HERO
    ===================================================== */

    --hero-overlay:
        linear-gradient(
            90deg,
            rgba(5,8,22,0.96) 10%,
            rgba(5,8,22,0.75) 45%,
            rgba(5,8,22,0.35) 100%
        );

    /* =====================================================
       SCROLLBAR
    ===================================================== */

    --scrollbar-bg:
        #07142b;

    --scrollbar-thumb:
        #ff6b00;

    /* =====================================================
       TECH EFFECTS
    ===================================================== */

    --tech-grid-opacity: 0.06;
    --tech-lines-opacity: 0.08;

    --tech-orange-gradient:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,107,0,0.5),
            transparent
        );

    --tech-blue-gradient:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,153,255,0.25),
            transparent
        );

}

/* =========================================================
   DARK MODE SUPPORT
========================================================= */

[data-theme="dark"] {
    color-scheme: dark;
}

/* =========================================================
   LIGHT MODE FUTURE SUPPORT
========================================================= */

[data-theme="light"] {

    --ssp-dark: #ffffff;
    --ssp-white: #050816;

}

/* =========================================================
   RESPONSIVE VARIABLES
========================================================= */

@media (max-width: 1200px) {

    :root {

        --fs-5xl: 4rem;
        --fs-4xl: 3.5rem;
        --fs-3xl: 2.8rem;

    }

}

@media (max-width: 992px) {

    :root {

        --navbar-height: 80px;

        --fs-5xl: 3.5rem;
        --fs-4xl: 3rem;
        --fs-3xl: 2.4rem;
        --fs-2xl: 1.8rem;

        --container-padding: 0 1.5rem;

    }

}

@media (max-width: 768px) {

    :root {

        --fs-5xl: 3rem;
        --fs-4xl: 2.5rem;
        --fs-3xl: 2rem;
        --fs-2xl: 1.6rem;

        --space-4xl: 5rem;
        --space-3xl: 4rem;

    }

}

@media (max-width: 576px) {

    :root {

        --navbar-height: 72px;

        --fs-5xl: 2.4rem;
        --fs-4xl: 2rem;
        --fs-3xl: 1.7rem;
        --fs-2xl: 1.4rem;

        --container-padding: 0 1rem;

    }

}