/* ==========================================================================
   Vectorial — Design tokens

   Tema oscuro, como el componente de referencia: fondo casi negro y la esfera
   de cromo del shader al centro. `--tinta` es el color de primer plano
   (foreground) y `--papel` el de fondo (background); en oscuro eso significa
   tinta clara sobre papel negro.
   ========================================================================== */

:root {
    /* --- Primer plano y fondo ------------------------------------------ */
    --tinta:          #fafafa;
    --tinta-90:       rgba(250, 250, 250, 0.90);
    --tinta-70:       rgba(250, 250, 250, 0.70);
    --tinta-55:       rgba(250, 250, 250, 0.55);
    --tinta-20:       rgba(250, 250, 250, 0.20);
    --tinta-12:       rgba(250, 250, 250, 0.12);
    --tinta-08:       rgba(250, 250, 250, 0.08);

    --papel:          #0a0a0b;
    --papel-claro:    #050506;   /* el contrario de la tinta: texto sobre botón claro */
    --papel-alt:      #101013;

    /* Vidrio: superficies translúcidas sobre el negro. */
    --vidrio:         rgba(250, 250, 250, 0.055);
    --vidrio-denso:   rgba(10, 10, 11, 0.72);
    --vidrio-tenue:   rgba(250, 250, 250, 0.03);
    --vidrio-borde:   rgba(250, 250, 250, 0.12);

    /* --- Acento -------------------------------------------------------- */
    --acento:         #a5b4fc;
    --acento-suave:   rgba(165, 180, 252, 0.16);
    --exito:          #34d399;
    --error:          #f87171;

    /* --- Bordes -------------------------------------------------------- */
    --borde:          rgba(250, 250, 250, 0.12);
    --borde-tenue:    rgba(250, 250, 250, 0.07);
    --borde-fuerte:   rgba(250, 250, 250, 0.28);

    /* --- Tipografía ---------------------------------------------------- */
    --f-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --f-texto:   'Inter', 'Segoe UI', system-ui, sans-serif;
    --f-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    --t-xs:   0.75rem;
    --t-sm:   0.875rem;
    --t-base: 1rem;
    --t-md:   clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
    --t-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    --t-xl:   clamp(1.6rem, 1.35rem + 1.3vw, 2.3rem);
    --t-2xl:  clamp(2rem, 1.5rem + 2.4vw, 3.3rem);
    --t-3xl:  clamp(2.6rem, 1.7rem + 4.2vw, 5rem);
    --t-4xl:  clamp(3rem, 1.7rem + 6.2vw, 7rem);

    /* --- Espaciado ----------------------------------------------------- */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;

    --seccion-y: clamp(4rem, 2.5rem + 6vw, 8rem);

    /* --- Layout -------------------------------------------------------- */
    --ancho-max:     1200px;
    --alto-cabecera: 72px;

    /* --- Radios -------------------------------------------------------- */
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   18px;
    --r-xl:   26px;
    --r-full: 999px;

    /* --- Sombras -------------------------------------------------------
       Sobre negro la sombra aporta poco: se usa un halo claro en su lugar. */
    --s-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --s-md: 0 12px 32px -14px rgba(0, 0, 0, 0.8);
    --s-lg: 0 26px 60px -22px rgba(0, 0, 0, 0.9);
    --s-xl: 0 40px 90px -30px rgba(0, 0, 0, 0.95);

    /* --- Movimiento ---------------------------------------------------- */
    --ease-fluido: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-rebote: cubic-bezier(0.34, 1.4, 0.64, 1);

    --d-rapida: 200ms;
    --d-media:  300ms;
    --d-lenta:  800ms;

    /* --- Capas --------------------------------------------------------- */
    --z-fondo:     -10;
    --z-contenido:  1;
    --z-cabecera:  60;
    --z-menu:      70;
    --z-flotante:  80;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --d-rapida: 0ms;
        --d-media:  0ms;
        --d-lenta:  0ms;
    }
}