/* =========================================================================
   variables.css — Design tokens (:root)
   XXIV Conferencia Internacional de APTE en Reus
   Extraídos del diseño Figma "Redessa Apte - 2026 - Landing".
   ========================================================================= */

:root {
    /* ---------- Color ---------------------------------------------------- */
    --color-primary: #006CFF;          /* azul de marca: fondos, títulos display */
    --color-primary-strong: #0053CC;   /* azul accesible para texto pequeño / hover */
    --color-primary-050: #EAF2FF;      /* fondo azul muy claro */
    --color-accent-cyan: #01A6E7;      /* acento del logotipo APTE */

    --color-ink: #000000;              /* texto principal */
    --color-ink-70: #333333;           /* texto secundario */
    --color-muted: #A5A5A5;            /* texto deshabilitado / metadatos */
    --color-line: #DEE0ED;             /* bordes de tarjeta y fondos de sección claros */

    --color-surface: #FFFFFF;
    --color-surface-alt: #DEE0ED;      /* secciones "Cómo llegar" y "FAQ" */
    --color-dark: #000000;             /* secciones Año Gaudí y footer */
    --color-on-dark: #FFFFFF;

    --color-overlay: rgba(0, 0, 0, .55);        /* capa sobre imágenes con texto */
    --color-overlay-primary: rgba(0, 51, 128, .58);

    /* ---------- Tipografía -------------------------------------------------- */
    --font-display: "FG Futurist", "Futura", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --fs-display: clamp(1.9rem, 0.9rem + 4.4vw, 4rem);     /* 30 → 64 */
    --fs-h2: clamp(1.6rem, 1rem + 2.5vw, 2rem);            /* 26 → 32 */
    --fs-h3: clamp(1.35rem, 1.15rem + .9vw, 1.75rem);      /* 22 → 28 */
    --fs-h4: 1.5rem;                                       /* 24 */
    --fs-lead: 1.125rem;                                   /* 18 */
    --fs-body: 1rem;                                       /* 16 */
    --fs-eyebrow: 1.125rem;                                /* 18 */
    --fs-small: .875rem;                                   /* 14 */

    --lh-tight: 1.08;
    --lh-heading: 1.15;
    --lh-body: 1.55;

    --tracking-display: .01em;

    /* ---------- Espaciado (escala base 4) -------------------------------- */
    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 7.5rem;

    --section-pad-y: clamp(3rem, 1.5rem + 6vw, 5rem);
    --container-max: 1240px;
    --container-pad: clamp(1.25rem, .5rem + 3vw, 2.5rem);

    /* ---------- Radios -------------------------------------------------- */
    --radius-sm: .5rem;      /* 8  */
    --radius-md: .75rem;     /* 12 */
    --radius-lg: 1rem;       /* 16 */
    --radius-xl: 1.25rem;    /* 20 */
    --radius-pill: 100px;

    /* ---------- Sombras / bordes -------------------------------------- */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, .06);
    --shadow-pop: 0 12px 40px rgba(0, 0, 0, .14);
    --border-card: 1px solid var(--color-line);

    /* ---------- Movimiento ------------------------------------------- */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .22s;
    --dur-mid: .5s;
    --dur-slow: .9s;
    --dur-xslow: 1.1s;
    --reveal-shift: 48px;

    /* ---------- Layout --------------------------------------------- */
    --topbar-h: 52px;
    --nav-h: 85px;
    --header-h: 137px;      /* topbar + nav; lo actualiza scripts.js al compactarse */
    --z-header: 1030;
    --z-skiplink: 1080;
}