/* =============================================================================
   Variables globales — Aspaldiko
   Paleta del manual de marca + escala tipográfica de fuentes.pdf.
   ========================================================================== */

:root {
  /* === Paleta confirmada === */
  --color-burgundy: #CD1C3F;
  --color-burgundy-dark: #A8132F;     /* derivado para hover/active */
  --color-burgundy-light: #E54E6B;    /* derivado para focus visible */
  --color-mint: #DDF0F0;
  --color-pink-soft: #FEE9E7;
  --color-pink-medium: #F8BCBA;

  /* Acentos secundarios y burgundy del footer (manual de marca) */
  --color-accent-teal: #749FA0;       /* números stats e iconos servicios */
  --color-footer: #9C1F32;            /* footer principal */
  --color-footer-dark: #6E1C25;       /* franja inferior con legales */

  /* === Neutros === */
  --color-text: #1A1A1A;
  --color-text-muted: #5A5A5A;
  --color-text-subtle: #8A8A8A;
  --color-border: #E5E5E5;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F8F7F5;

  /* === Tipografía === */
  --font-family: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fw-light: 300;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Escala del manual (px → rem con base 16). Línea-altura en unitless. */
  --fs-h-xxl: 3.375rem;   /* 54 / line 60 */
  --fs-h-xl: 3.125rem;    /* 50 / line 42 (tight) */
  --fs-h-l: 2rem;         /* 32 / line 40 */
  --fs-h-m: 1.75rem;      /* 28 / line 36 */
  --fs-h-s: 1.5rem;       /* 24 / line 32 */
  --fs-h-t: 1.375rem;     /* 22 / line 30 */
  --fs-p-xl: 1.25rem;     /* 20 / line 26 */
  --fs-p-l: 1.125rem;     /* 18 / line 24 */
  --fs-p-m: 1rem;         /* 16 / line 22 */
  --fs-p-s: 0.875rem;     /* 14 / line 20 */
  --fs-p-t: 0.75rem;      /* 12 / line 16 */

  --lh-h-xxl: 1.111;
  --lh-h-xl: 0.84;
  --lh-h-l: 1.25;
  --lh-h-m: 1.286;
  --lh-h-s: 1.333;
  --lh-h-t: 1.364;
  --lh-p-xl: 1.3;
  --lh-p-l: 1.333;
  --lh-p-m: 1.375;
  --lh-p-s: 1.428;
  --lh-p-t: 1.333;

  /* === Espaciado === */
  --space-1: 0.25rem;     /* 4 */
  --space-2: 0.5rem;      /* 8 */
  --space-3: 0.75rem;     /* 12 */
  --space-4: 1rem;        /* 16 */
  --space-5: 1.5rem;      /* 24 */
  --space-6: 2rem;        /* 32 */
  --space-7: 2.5rem;      /* 40 */
  --space-8: 3rem;        /* 48 */
  --space-9: 4rem;        /* 64 */
  --space-10: 5rem;       /* 80 */
  --space-12: 6rem;       /* 96 */
  --space-16: 8rem;       /* 128 */

  /* === Layout === */
  --container-max: 1200px;
  --container-pad: 1.25rem;     /* 20px en mobile */
  --container-pad-md: 2rem;     /* 32px en tablet+ */
  --section-pad-y: 4rem;        /* mobile */
  --section-pad-y-md: 6rem;     /* desktop */

  /* === Bordes y radio === */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* === Sombras === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);

  /* === Transiciones === */
  --t-fast: 150ms ease-out;
  --t-base: 250ms ease-out;
  --t-slow: 400ms ease-out;

  /* === z-index === */
  --z-header: 100;
  --z-modal: 500;
}

/* === Breakpoints (referencia, se usan inline en cada CSS) ===
   sm:  >= 640px
   md:  >= 768px
   lg:  >= 1024px
   xl:  >= 1280px
*/

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
  }
}