/* ============================================================
   TYPOGRAPHY TOKENS — Plataforma de Eventos
   Archivo = display/headlines · IBM Plex Sans = UI/body · IBM Plex Mono = data
   Base values + composite type-style helper classes.
   ============================================================ */

:root {
  /* ---------- FAMILIES ---------- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- WEIGHTS ---------- */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ---------- SIZES ---------- */
  --size-2xs: 11px;
  --size-xs:  12px;
  --size-sm:  14px;
  --size-md:  16px;
  --size-lg:  18px;
  --size-xl:  21px;
  --size-2xl: 26px;
  --size-3xl: 33px;
  --size-4xl: 44px;
  --size-5xl: 60px;

  /* ---------- LINE HEIGHTS ---------- */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.35;
  --leading-relaxed: 1.5;
  --leading-loose:   1.6;

  /* ---------- LETTER SPACING ---------- */
  --tracking-tighter: -0.015em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;
}

/* ============================================================
   COMPOSITE TYPE STYLES
   Apply a single class to get the full type treatment.
   ============================================================ */
.type-display-lg { font-family: var(--font-display); font-size: var(--size-5xl); font-weight: var(--weight-black);     line-height: var(--leading-tight);  letter-spacing: var(--tracking-tighter); }
.type-display-md { font-family: var(--font-display); font-size: var(--size-4xl); font-weight: var(--weight-extrabold); line-height: var(--leading-tight);  letter-spacing: var(--tracking-tighter); }
.type-display-sm { font-family: var(--font-display); font-size: var(--size-3xl); font-weight: var(--weight-extrabold); line-height: var(--leading-snug);   letter-spacing: var(--tracking-tight); }

.type-heading-lg { font-family: var(--font-body); font-size: var(--size-2xl); font-weight: var(--weight-bold);     line-height: var(--leading-snug);   letter-spacing: var(--tracking-tight); }
.type-heading-md { font-family: var(--font-body); font-size: var(--size-xl);  font-weight: var(--weight-semibold); line-height: var(--leading-normal); letter-spacing: var(--tracking-tight); }
.type-heading-sm { font-family: var(--font-body); font-size: var(--size-lg);  font-weight: var(--weight-semibold); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); }

.type-body-lg { font-family: var(--font-body); font-size: var(--size-lg); font-weight: var(--weight-regular); line-height: var(--leading-loose);   letter-spacing: var(--tracking-normal); }
.type-body-md { font-family: var(--font-body); font-size: var(--size-md); font-weight: var(--weight-regular); line-height: var(--leading-loose);   letter-spacing: var(--tracking-normal); }
.type-body-sm { font-family: var(--font-body); font-size: var(--size-sm); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-normal); }

.type-label-md { font-family: var(--font-body); font-size: var(--size-sm); font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-wide); }
.type-label-sm { font-family: var(--font-body); font-size: var(--size-xs); font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-wide); }
.type-caption  { font-family: var(--font-body); font-size: var(--size-xs); font-weight: var(--weight-regular); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); }

.type-overline { font-family: var(--font-mono); font-size: var(--size-2xs); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.type-code     { font-family: var(--font-mono); font-size: var(--size-xs);  font-weight: var(--weight-regular);  line-height: var(--leading-relaxed); letter-spacing: var(--tracking-normal); }