/* ============================================
   VARIABLES CSS - APEIRON
   Paleta Synthwave 80s inspirada en Double Mark
   ============================================ */

:root {
    /* ----------------------------------------
       COLORES - Fondos
    ---------------------------------------- */
    --color-bg-dark: #19111f;
    --color-bg-grid: #19111f;
    --color-bg-card: rgba(31, 31, 40, 0.8);
    --color-bg-card-solid: lime;

    /* ----------------------------------------
       COLORES - Líneas y bordes
    ---------------------------------------- */
    --color-grid-line: #e6ddc011;
    --color-border: #3d3d5c;

    /* ----------------------------------------
       COLORES - Texto
    ---------------------------------------- */
    --color-text-primary: #e6ddc0;
    --color-text-muted: #a0a0a0;
    --color-text-dark: #16161a;

    /* ----------------------------------------
       COLORES - Acentos Synthwave
    ---------------------------------------- */
    --color-accent-yellow: #e0b63e;
    --color-accent-orange: #d83816;
    --color-accent-red: #c7161c;
    --color-accent-magenta: #981638;
    --color-accent-purple: #610c33;

    /* ----------------------------------------
       GRADIENTES
    ---------------------------------------- */
    --gradient-stripe: linear-gradient(
        135deg,
        var(--color-accent-purple) 50%,
        var(--color-accent-purple) 60%,
        var(--color-accent-magenta) 60%,
        var(--color-accent-magenta) 70%,
        var(--color-accent-red) 70%,
        var(--color-accent-red) 80%,
        var(--color-accent-orange) 80%,
        var(--color-accent-orange) 90%,
        var(--color-accent-yellow) 90%,
        var(--color-accent-yellow) 100%
    );

    --gradient-stripe-vertical: linear-gradient(
        to bottom,
        var(--color-accent-purple) 0%,
        var(--color-accent-purple) 20%,
        var(--color-accent-magenta) 20%,
        var(--color-accent-magenta) 40%,
        var(--color-accent-red) 40%,
        var(--color-accent-red) 60%,
        var(--color-accent-orange) 60%,
        var(--color-accent-orange) 80%,
        var(--color-accent-yellow) 80%,
        var(--color-accent-yellow) 100%
    );

    --gradient-fade-dark: linear-gradient(
        180deg,
        transparent,
        #19111f,
        transparent
    );

    --gradient-nav: linear-gradient(
        to bottom,
        var(--color-bg-dark),
        transparent
    );

    /* ----------------------------------------
       TIPOGRAFÍA - Familias
    ---------------------------------------- */
    --font-display: 'Bebas Neue', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;

    /* ----------------------------------------
       TIPOGRAFÍA - Tamaños (fluid)
    ---------------------------------------- */
    --text-xs: clamp(0.7rem, 1vw, 0.75rem);
    --text-sm: clamp(0.8rem, 1.2vw, 0.875rem);
    --text-base: clamp(0.9rem, 1.5vw, 1rem);
    --text-lg: clamp(1rem, 1.8vw, 1.125rem);
    --text-xl: clamp(1.25rem, 2vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 3vw, 2rem);
    --text-3xl: clamp(2rem, 4vw, 3rem);
    --text-4xl: clamp(2.5rem, 5vw, 4rem);
    --text-hero: clamp(4rem, 15vw, 12rem);

    /* ----------------------------------------
       ESPACIADO
    ---------------------------------------- */
    --space-2xs: 0.25rem; /* 4px */
    --space-xs: 0.5rem; /* 8px */
    --space-sm: 1rem; /* 16px */
    --space-md: 2rem; /* 32px */
    --space-lg: 4rem; /* 64px */
    --space-xl: 6rem; /* 96px */
    --space-2xl: 8rem; /* 128px */

    /* ----------------------------------------
       LAYOUT
    ---------------------------------------- */
    --container-max: 1400px;
    --container-padding: var(--space-md);
    --header-height: 80px;
    --grid-size: 50px;

    /* ----------------------------------------
       BORDES
    ---------------------------------------- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    /* ----------------------------------------
       SOMBRAS
    ---------------------------------------- */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow-yellow: 0 10px 30px rgba(244, 197, 66, 0.3);
    --shadow-glow-red: 0 10px 30px rgba(196, 69, 105, 0.3);

    /* ----------------------------------------
       TRANSICIONES
    ---------------------------------------- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ----------------------------------------
       Z-INDEX SCALE
    ---------------------------------------- */
    --z-behind: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 900;
    --z-modal: 1000;
    --z-tooltip: 1100;
}

/* ============================================
   DARK MODE ADJUSTMENTS (si se necesita)
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Ya estamos en modo oscuro por defecto */
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-base: 0s;
        --transition-smooth: 0s;
        --transition-bounce: 0s;
    }
}