/*
 * variables.css — Ticosoft Futuro Digital
 * Design tokens y variables CSS globales
 * ====================================================
 */

:root {

    /* ==========================================================
       COLORES BASE
       ========================================================== */

    --color-bg:            #07090B;
    --color-bg-soft:       #0B0E11;
    --color-bg-card:       #0D1014;
    --color-bg-card-hover: #11151A;

    --color-white:         #F6F6F4;
    --color-white-soft:    #D7D9DC;

    --color-text:          #F5F5F3;
    --color-text-secondary:#A6ABB2;
    --color-text-muted:    #777D85;

    --color-border:        rgba(255, 255, 255, 0.12);
    --color-border-strong: rgba(255, 255, 255, 0.22);

    /* ==========================================================
       COLORES DE MARCA
       ========================================================== */

    --color-magenta: #D935F5;
    --color-purple:  #8B5CF6;
    --color-cyan:    #08D9E6;
    --color-blue:    #2997FF;

    /* ==========================================================
       GRADIENTE PRINCIPAL
       ========================================================== */

    --gradient-brand: linear-gradient(
        90deg,
        #D935F5  0%,
        #8B5CF6 38%,
        #2997FF 68%,
        #08D9E6 100%
    );

    /* ==========================================================
       TIPOGRAFÍAS
       ========================================================== */

    --font-display: 'DM Serif Display', Georgia, serif;
    --font-sans:    'DM Sans', Arial, sans-serif;

    /* ==========================================================
       TAMAÑOS TIPOGRÁFICOS
       ========================================================== */

    --fs-xs:   0.70rem;
    --fs-sm:   0.82rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.4rem;

    --fs-h4: clamp(1.5rem,  2vw, 2rem);
    --fs-h3: clamp(2rem,    3vw, 3rem);
    --fs-h2: clamp(2.8rem,  5vw, 5.5rem);
    --fs-h1: clamp(3.8rem,  7vw, 7.5rem);

    /* ==========================================================
       ESPACIADO
       ========================================================== */

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ==========================================================
       LAYOUT
       ========================================================== */

    --container-max:  1440px;
    --container-wide: 1600px;

    --page-padding-desktop: 32px;
    --page-padding-tablet:  24px;
    --page-padding-mobile:  18px;

    /* ==========================================================
       BORDES
       ========================================================== */

    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   22px;
    --radius-pill: 999px;

    /* ==========================================================
       SOMBRAS
       ========================================================== */

    --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.15);

    /* ==========================================================
       ANIMACIONES
       ========================================================== */

    --transition-fast: 180ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 600ms cubic-bezier(0.2, 0.7, 0.2, 1);

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

    --z-base:    1;
    --z-content: 10;
    --z-header:  100;
    --z-modal:   1000;

}

@media (min-width: 1600px) {
    :root {
        --page-padding-desktop: 48px;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    :root {
        --page-padding-desktop: 36px;
    }
}