/* ===================================
   SCRATLOOP DIGITAL
   DESIGN SYSTEM
   VARIABLES
   RESPONSIVE FLUID SYSTEM
=================================== */

:root {

    /* ==========================
       BRAND COLORS
    ========================== */

    --primary: #00C8FF;
    --secondary: #2563FF;
    --accent: #8B3DFF;

    /* ==========================
       SCRATTY COLORS
    ========================== */

    --scratty-cyan: #00E5FF;
    --scratty-blue: #2563FF;
    --scratty-purple: #8B3DFF;

    --scratty-glow:
        rgba(0, 200, 255, .35);

    --scratty-glow-purple:
        rgba(139, 61, 255, .25);

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

    --bg: #050816;
    --bg-deep: #020617;
    --surface: #0F172A;
    --surface-light: #1E293B;

    --surface-glass:
        rgba(15, 23, 42, .72);

    --surface-glass-light:
        rgba(255, 255, 255, .045);

    /* ==========================
       TEXT COLORS
    ========================== */

    --text: #F8FAFC;
    --text-muted: #B6C0CC;
    --text-soft: #CBD5E1;

    /* ==========================
       SPECIAL COLORS
    ========================== */

    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;

    /* ==========================
       BRAND GRADIENT
    ========================== */

    --gradient:
        linear-gradient(
            90deg,
            #00E5FF 0%,
            #00C8FF 28%,
            #2563FF 52%,
            #6D5CFF 75%,
            #A855F7 100%
        );

    /* ==========================
       SCRATTY GRADIENT
    ========================== */

    --gradient-scratty:
        linear-gradient(
            135deg,
            #00E5FF 0%,
            #2563FF 48%,
            #8B3DFF 100%
        );

    /* ==========================
       SOFT GRADIENTS
    ========================== */

    --gradient-soft:
        linear-gradient(
            135deg,
            rgba(0, 200, 255, .15),
            rgba(37, 99, 255, .10),
            rgba(139, 61, 255, .15)
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #050816,
            #0F172A,
            #080B20
        );

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

    --hero-glow:
        radial-gradient(
            circle,
            rgba(0, 200, 255, .18),
            transparent 65%
        );

    --hero-purple-glow:
        radial-gradient(
            circle,
            rgba(139, 61, 255, .14),
            transparent 65%
        );

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

    --border:
        1px solid rgba(255, 255, 255, .08);

    --border-light:
        1px solid rgba(255, 255, 255, .12);

    --border-primary:
        1px solid rgba(0, 200, 255, .22);

    --border-purple:
        1px solid rgba(139, 61, 255, .22);

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

    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --radius-pill: 999px;

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

    --shadow-sm:
        0 5px 15px rgba(0, 0, 0, .15);

    --shadow-md:
        0 15px 40px rgba(0, 0, 0, .25);

    --shadow-lg:
        0 25px 70px rgba(0, 0, 0, .35);

    /* ==========================
       BRAND GLOW
    ========================== */

    --shadow-glow:
        0 0 35px rgba(0, 200, 255, .25);

    --shadow-glow-strong:
        0 0 55px rgba(0, 200, 255, .40);

    --shadow-purple:
        0 0 45px rgba(139, 61, 255, .25);

    --shadow-scratty:
        0 0 30px rgba(0, 200, 255, .30),
        0 0 70px rgba(139, 61, 255, .18);

    /* ==========================
       GLASS EFFECT
    ========================== */

    --glass:
        rgba(255, 255, 255, .035);

    --glass-strong:
        rgba(255, 255, 255, .06);

    --glass-border:
        rgba(255, 255, 255, .09);

    --glass-blur:
        blur(18px);

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

    --transition: .3s ease;
    --transition-fast: .2s ease;
    --transition-slow: .5s ease;

    /* ==========================
       RESPONSIVE CONTAINER
    ========================== */

    /*
       El contenido crece con la pantalla,
       pero mantiene márgenes cómodos.
    */

    --container:
        min(92vw, 1700px);

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

    --section-padding:
        clamp(75px, 7vw, 130px);

    --section-padding-mobile:
        70px;

    /* ==========================
       HEADER
    ========================== */

    --header-height:
        clamp(78px, 5vw, 95px);

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

    --font-main:
        "Inter",
        sans-serif;

    --font-heading:
        "Space Grotesk",
        sans-serif;

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

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

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

    --z-header: 1000;
    --z-content: 10;
    --z-overlay: 900;
    --z-chatbot: 9999;

}