/* ==========================================================================
   Design tokens
   Generado a partir de tokens.json (tema "light").
   - Colores: primitivos + semánticos.
   - Espaciado y tipografía: en rem (base 16px = 1rem).
   ========================================================================== */

:root {
  /* --- Primitivos: color ------------------------------------------------ */
  --color-basic-black: #1a1a1a;
  --color-basic-white: #ffffff;
  --color-blackberry-100: #b4b4b4;
  --color-blackberry-200: #504d49;
  --color-grey-100: #fafafa;
  --color-grey-200: #f5f5f5;
  --color-grey-300: #e4e4e4;
  --color-grey-400: #b2b2b2;
  --color-yellow-300: #f6c531;
  --color-cherry-400: #e23b45;
  --color-ulma-400: #ed9a33;
  --color-iplace-400: #2f9d89;
  --color-shori-400: #061d94;

  /* --- Semánticos: contenido (texto / iconografía) ---------------------- */
  --color-content-1: var(--color-basic-black); /* texto principal */
  --color-content-2: var(--color-blackberry-200); /* texto secundario (8.6:1 sobre blanco) */
  --color-content-3: var(--color-blackberry-100); /* solo texto grande/decorativo (no cumple 4.5:1) */
  --color-content-inverse: var(--color-basic-white);

  /* --- Semánticos: fondo ------------------------------------------------ */
  --color-background-1: var(--color-basic-white);
  --color-background-2: var(--color-grey-100);
  --color-background-3: var(--color-grey-200);
  --color-background-4: var(--color-grey-300);
  --color-background-inverse: var(--color-basic-black);

  /* --- Semánticos: borde ------------------------------------------------ */
  --color-border-1: var(--color-basic-black);
  --color-border-2: var(--color-grey-400);
  --color-border-3: var(--color-grey-200);
  --color-border-inverse: var(--color-basic-white);

  /* --- Semánticos: marca / estado --------------------------------------- */
  --color-highlight: var(--color-basic-black);
  --color-highlight-2: var(--color-yellow-300);
  --color-focus-ring: var(--color-yellow-300); /* anillo de foco (Figma: semantic/highlight2) */
  --color-danger: var(--color-cherry-400);
  --color-ulma: var(--color-ulma-400);
  --color-iplace: var(--color-iplace-400);
  --color-shori: var(--color-shori-400);

  /* --- Espaciado (rem) -------------------------------------------------- */
  --spacing-1: 0.25rem; /*  4px */
  --spacing-2: 0.5rem; /*   8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /*    16px */
  --spacing-5: 1.5rem; /*  24px */
  --spacing-6: 2rem; /*    32px */
  --spacing-7: 3rem; /*    48px */
  --spacing-8: 4rem; /*    64px */

  /* --- Tipografía: familias --------------------------------------------- */
  /* ABC Monument Grotesk es una fuente comercial: coloca los .woff2 en
     assets/fonts y declara @font-face en styles.css. Mientras tanto se usa
     una pila de respaldo grotesca. */
  --font-family-base: "ABC Monument Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* --- Tipografía: pesos ------------------------------------------------ */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* --- Tipografía: tamaños (rem) ---------------------------------------- */
  --font-size-display-l: 4rem; /*    64px */
  --font-size-heading-l: 3rem; /*    48px */
  --font-size-heading-m: 2.5rem; /*  40px */
  --font-size-heading-s: 2rem; /*    32px */
  --font-size-subheading: 1.5rem; /* 24px */
  --font-size-body-l: 1.25rem; /*    20px */
  --font-size-body-m: 1rem; /*       16px */
  --font-size-body-s: 0.875rem; /*   14px */
  --font-size-button-l: 1.125rem; /* 18px */
  --font-size-button-m: 1rem; /*     16px */
  --font-size-label-m: 0.875rem; /*  14px */
  --font-size-label-s: 0.75rem; /*   12px */

  /* --- Tipografía: interlineados (rem) ---------------------------------- */
  --line-height-display-l-bold: 4.25rem; /*  68px */
  --line-height-display-l-light: 4.5rem; /*  72px */
  --line-height-heading-l: 3rem; /*          48px */
  --line-height-heading-m: 3rem; /*          48px */
  --line-height-heading-s: 2.5rem; /*        40px */
  --line-height-subheading: 1.75rem; /*      28px */
  --line-height-body-l: 1.625rem; /*         26px */
  --line-height-body-m: 1.5rem; /*           24px */
  --line-height-body-s: 1rem; /*             16px */
  --line-height-button-l: 1.5rem; /*         24px */
  --line-height-button-m: 1.25rem; /*        20px */
  --line-height-label-m: 1.125rem; /*        18px */
  --line-height-label-s: 1rem; /*            16px */
}