/* ============================================
   variables.css — Design tokens globales HYPE
   Edita aquí para cambiar colores y fuentes
   en toda la web de una sola vez.
   ============================================ */

:root {
    /* Colores principales */
    --color-black:      #0a0a0a;
    --color-black-soft: #111111;
    --color-green:      #00ff41;
    --color-green-dark: #00cc33;
    --color-pink:       #ff2d78;
    --color-blue:       #1a6dff;
    --color-white:      #ffffff;
    --color-grey:       #888888;
    --color-grey-light: #cccccc;

    /* Fondos de sección */
    --bg-dark:    var(--color-black);
    --bg-darker:  var(--color-black-soft);
    --bg-blue:    #1247b0;

    /* Tipografía */
    --font-hype:    'HYPE', sans-serif;
    --font-title:   'QarantaBold', sans-serif;
    --font-body:    'Arial', 'Helvetica Neue', sans-serif;

    /* Tamaños de texto */
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.25rem;
    --fs-lg:   1.75rem;
    --fs-xl:   2.5rem;
    --fs-xxl:  4rem;
    --fs-hero: clamp(3rem, 8vw, 7rem);

    /* Espaciados de sección */
    --section-py: 5rem;
    --section-py-sm: 3rem;

    /* Bordes */
    --radius-sm: 4px;
    --radius-md: 8px;

    /* Transiciones */
    --transition: 0.25s ease;
}