/* ============================================================
   FILBB 2026 – variables.css
   Variables CSS globales. Cambiar estas variables cambia
   el aspecto de TODO el sitio de forma consistente.
   ============================================================ */

/* Fuente local (bundled con el tema) */
@font-face {
    font-family: 'Bahnschrift';
    src: local('Bahnschrift'),
         url('../fonts/bahnschrift.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Colores de marca ── */
    --filbb-naranja:      #E05520;   /* Header, cronograma, botones primarios */
    --filbb-naranja-osc:  #C44918;   /* Hover naranja */
    --filbb-celeste:      #4BB5D5;   /* Countdown, aportes CTA */
    --filbb-celeste-osc:  #3A9DB8;   /* Hover celeste */
    --filbb-oscuro:       #1D2129;   /* Footer, textos oscuros */
    --filbb-azul-acc:     #2C7BA0;   /* Títulos de sponsors, acentos azules */
    --filbb-blanco:       #FFFFFF;
    --filbb-gris-claro:   #F5F6F7;
    --filbb-gris-borde:   #E0E0E0;
    --filbb-texto:        #2D2D2D;   /* Texto principal */
    --filbb-texto-suave:  #555555;   /* Texto secundario */

    /* ── Tipografía ── */
    --font-principal: 'Bahnschrift', 'Calibri', 'Segoe UI', Arial, sans-serif;

    /* Escala tipográfica */
    --text-xs:   0.75rem;   /*  12px */
    --text-sm:   0.875rem;  /*  14px */
    --text-base: 1rem;      /*  16px */
    --text-md:   1.125rem;  /*  18px */
    --text-lg:   1.375rem;  /*  22px */
    --text-xl:   1.75rem;   /*  28px */
    --text-2xl:  2.25rem;   /*  36px */
    --text-3xl:  3rem;      /*  48px */
    --text-4xl:  4rem;      /*  64px */

    /* ── Espaciados ── */
    --gap-xs:  0.5rem;
    --gap-sm:  1rem;
    --gap-md:  1.5rem;
    --gap-lg:  2.5rem;
    --gap-xl:  4rem;
    --gap-2xl: 6rem;

    /* ── Contenedor ── */
    --contenedor-max:     1200px;
    --contenedor-pad:     1.5rem;

    /* ── Bordes ── */
    --radio-sm:   4px;
    --radio-md:   8px;
    --radio-lg:   16px;
    --radio-full: 9999px;

    /* ── Sombras ── */
    --sombra-sm:  0 1px 3px rgba(0,0,0,0.12);
    --sombra-md:  0 4px 12px rgba(0,0,0,0.15);
    --sombra-lg:  0 8px 24px rgba(0,0,0,0.18);

    /* ── Transiciones ── */
    --transicion:       0.25s ease;
    --transicion-lenta: 0.4s ease;

    /* ── Z-index ── */
    --z-header:   100;
    --z-overlay:  200;
    --z-modal:    300;

    /* ── Alturas ── */
    --header-h:   80px;
}