/* ==========================================================================
   tokens.css — Variables de diseño de InYaEar
   Cambia aquí colores, tipografía, espaciado o forma y se actualiza toda la web.
   ========================================================================== */

:root {
  /* ---------- Paleta de marca ---------- */
  --color-primary: #CE0A2D;   /* Rojo InYaEar: CTAs, precios, foco, acentos */
  --color-black:   #000000;   /* Texto y secciones de contraste */
  --color-white:   #FFFFFF;   /* Fondo base */

  /* Derivados: salen de la paleta, sin añadir colores nuevos */
  --color-primary-hover: color-mix(in srgb, var(--color-primary), #000 15%);
  --color-primary-soft:  rgb(206 10 45 / .1);   /* fondos suaves de iconos */
  --ink-70:   rgb(0 0 0 / .7);                  /* texto secundario sobre blanco */
  --ink-50:   rgb(0 0 0 / .5);                  /* texto terciario sobre blanco */
  --line:     rgb(0 0 0 / .1);                  /* bordes sobre blanco */
  --tint:     rgb(0 0 0 / .03);                 /* fondo gris muy claro (Preise) */
  --paper-70: rgb(255 255 255 / .72);           /* texto secundario sobre negro */
  --paper-50: rgb(255 255 255 / .5);            /* texto terciario sobre negro */
  --line-dark: rgb(255 255 255 / .14);          /* bordes sobre negro */

  /* ---------- Tipografía (Montserrat autoalojada, ver base.css) ---------- */
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-display: clamp(3rem, 11vw, 8rem);        /* titular de portada */
  --fs-h2:      clamp(2rem, 4.5vw, 3.5rem);     /* títulos de sección */
  --fs-h2-sm:   clamp(1.625rem, 2.6vw, 2.25rem);/* títulos dentro de paneles */
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-body:    clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-lead:    clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-eyebrow: .8125rem;
  --fs-price:   clamp(2.5rem, 5vw, 4rem);
  --fs-small:   .875rem;
  --fs-xs:      .75rem;

  /* ---------- Espaciado (base 4px) ---------- */
  --space-1: .25rem;  /*   4px */
  --space-2: .5rem;   /*   8px */
  --space-3: .75rem;  /*  12px */
  --space-4: 1rem;    /*  16px */
  --space-5: 1.5rem;  /*  24px */
  --space-6: 2rem;    /*  32px */
  --space-7: 3rem;    /*  48px */
  --space-8: 4rem;    /*  64px */
  --space-9: 6rem;    /*  96px */
  --space-10: 8rem;   /* 128px */
  --section-y: clamp(4rem, 10vw, 8rem);   /* padding vertical de las secciones */
  --container: 1200px;
  --header-h: 72px;

  /* ---------- Forma ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .06);
  --shadow-md: 0 8px 24px rgb(0 0 0 / .08);
  --shadow-lg: 0 20px 48px rgb(0 0 0 / .12);
  --shadow-glow: 0 10px 30px rgb(206 10 45 / .35);  /* hover del botón primario */

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .25s;
  --dur: .3s;
  --dur-slow: .6s;
}