/*
  Tokens de marca iuvity.
  Fuente: brand/iuvity Brandbook 2025 + valores medidos en iuvity.com
  (2026-10-06, 1440px). Diferencias documentadas en docs/decisiones.md.
*/
:root {
  /* Color – primarios (manual: iuvity green, negro, blanco) */
  --color-green: #26d07c;          /* iuvity green */
  --color-green-hover: #21da88;    /* hover del menú en el sitio */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Color – acentos (manual, página 10) */
  --color-teal-dark: #063d45;      /* fondos oscuros, texto de párrafo */
  --color-teal: #007c77;
  --color-blue: #15ade0;
  --color-purple: #9d69a3;
  --color-bronze: #de8f6e;
  --color-gray-dark: #636e84;
  --color-gray: #b0b3ba;
  --color-gray-light: #dfe1e6;
  --color-gray-lighter: #f2f3f4;   /* fondo de acento claro del sitio */

  /* Color – texto */
  --color-ink: #1e263d;            /* "negro iuvity" de titulares (manual) */
  --color-ink-body: #1b1f22;       /* párrafos según manual */
  --color-error: #f2545b;

  /* Roles */
  --bg: var(--color-white);
  --bg-dark: var(--color-teal-dark);
  --bg-accent: var(--color-gray-lighter);
  --text: var(--color-ink);
  --text-muted: var(--color-teal-dark);
  --text-on-dark: var(--color-white);
  --link: var(--color-teal);
  --link-hover: var(--color-green);
  --link-on-dark: var(--color-green);
  --focus: var(--color-blue);

  /* Tipografía */
  --font-sans: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-wide: "Archivo Wide", "Archivo", "Segoe UI", Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Escala (escritorio ≥1200px / móvil). Medido en el sitio actual. */
  --fs-h1: clamp(2rem, 1.2rem + 2.6vw, 3.4375rem);     /* 32 → 55px */
  --fs-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);     /* 28 → 40px */
  --fs-h3: 1.1875rem;                                  /* 19px */
  --fs-eyebrow: 1.125rem;                              /* 18px */
  --fs-body: 1rem;                                     /* 16px */
  --fs-text: 0.875rem;                                 /* 14px párrafos */
  --fs-nav: 1.125rem;                                  /* 18px */
  --fs-small: 0.8125rem;

  --lh-tight: 1.18;
  --lh-heading: 1.275;
  --lh-body: 1.45;
  --lh-text: 1.78;

  --ls-heading: -1px;       /* manual: tracking -10 */
  --ls-caps: 1px;           /* manual: tracking mínimo +100 en mayúsculas */

  /* Espaciado (múltiplos de 4/8) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;          /* 80px: padding de sección del sitio */
  --section-y: clamp(3rem, 2rem + 3vw, 5rem);
  --gutter: 25px;           /* padding lateral del contenedor */

  /* Contenedor */
  --container-max: 1500px;
  --container-text: 670px;

  /* Radios (medidos) */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-pill: 25px;
  --radius-card: 32px 0;            /* esquinas opuestas */
  --radius-bottom: 0 0 48px 48px;

  /* Sombras: el sitio no usa sombras */
  --shadow-none: none;
  --shadow-menu: 0 8px 24px rgba(6, 61, 69, 0.12);

  /* Cabecera */
  --header-h: 85px;

  /* Transiciones */
  --ease: 0.4s ease-in-out;

  /*
    Breakpoints (referencia; CSS no permite variables en @media):
    sm 576px · md 768px · lg 992px · xl 1200px · xxl 1500px
  */
}