:root {
  /* ===========================
     1. MOBILE FIRST (Base values)
     =========================== */
  
  /* xs - sm - base (No cambian en diseño, pero se definieron igual por consistencia) */
  --text-xs-size: 12px;
  --text-xs-lh:   16px;

  --text-sm-size: 14px;
  --text-sm-lh:   20px;

  --text-base-size: 16px;
  --text-base-lh:   24px;

  /* lg */
  --text-lg-size: 16px;
  --text-lg-lh:   24px;

  /* xl */
  --text-xl-size: 16px;
  --text-xl-lh:   24px;

  /* 2xl */
  --text-2xl-size: 16px;
  --text-2xl-lh:   24px;

  /* 3xl */
  --text-3xl-size: 24px;
  --text-3xl-lh:   32px;

  /* 4xl */
  --text-4xl-size: 28px;
  --text-4xl-lh:   36px;

  /* 5xl */
  --text-5xl-size: 32px;
  --text-5xl-lh:   40px;

  /* 6xl */
  --text-6xl-size: 36px;
  --text-6xl-lh:   44px;

  /* 7xl */
  --text-7xl-size: 40px;
  --text-7xl-lh:   52px;

  /* 8xl */
  --text-8xl-size: 52px;
  --text-8xl-lh:   52px;

  /* 9xl */
  --text-9xl-size: 68px;
  --text-9xl-lh:   68px;
}

/* ===========================
   2. TABLET OVERRIDES (min-width: 768px)
   =========================== */
@media (min-width: 768px) {
  :root {
    --text-lg-size: 18px;
    --text-lg-lh:   28px;

    --text-xl-size: 18px;
    --text-xl-lh:   28px;

    --text-2xl-size: 20px;
    --text-2xl-lh:   32px;

    --text-3xl-size: 28px;
    --text-3xl-lh:   36px;

    --text-4xl-size: 32px;
    --text-4xl-lh:   40px;

    --text-5xl-size: 40px;
    --text-5xl-lh:   44px;

    --text-6xl-size: 48px;
    --text-6xl-lh:   48px;

    --text-7xl-size: 56px;
    --text-7xl-lh:   60px;

    --text-8xl-size: 68px;
    --text-8xl-lh:   68px;

    --text-9xl-size: 80px;
    --text-9xl-lh:   80px;
  }
}

/* ===========================
   3. DESKTOP OVERRIDES (min-width: 1024px)
   =========================== */
@media (min-width: 1024px) {
  :root {
    /* text-lg se mantiene igual que en tablet (18/28), no es necesario redefinirlo */

    --text-xl-size: 20px;
    /* lh se mantiene en 28px */

    --text-2xl-size: 24px;
    /* lh se mantiene en 32px */

    --text-3xl-size: 32px;
    --text-3xl-lh:   40px;

    --text-4xl-size: 36px;
    --text-4xl-lh:   44px;

    --text-5xl-size: 44px;
    --text-5xl-lh:   48px;

    --text-6xl-size: 56px;
    --text-6xl-lh:   56px;

    --text-7xl-size: 68px;
    --text-7xl-lh:   72px;

    --text-8xl-size: 96px;
    --text-8xl-lh:   96px;

    --text-9xl-size: 128px;
    --text-9xl-lh:   128px;
  }
}

/* ===========================
   CLASES DE UTILIDAD (Limpias)
   =========================== */

/* Pesos */
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

.fw-900-italic {
  font-weight: 900;
  font-style: italic;
}

/* Tamaños */
.text-xs   { font-size: var(--text-xs-size);   line-height: var(--text-xs-lh); }
.text-sm   { font-size: var(--text-sm-size);   line-height: var(--text-sm-lh); }
.text-base { font-size: var(--text-base-size); line-height: var(--text-base-lh); }
.text-lg   { font-size: var(--text-lg-size);   line-height: var(--text-lg-lh); }
.text-xl   { font-size: var(--text-xl-size);   line-height: var(--text-xl-lh); }
.text-2xl  { font-size: var(--text-2xl-size);  line-height: var(--text-2xl-lh); }
.text-3xl  { font-size: var(--text-3xl-size);  line-height: var(--text-3xl-lh); }
.text-4xl  { font-size: var(--text-4xl-size);  line-height: var(--text-4xl-lh); }
.text-5xl  { font-size: var(--text-5xl-size);  line-height: var(--text-5xl-lh); }
.text-6xl  { font-size: var(--text-6xl-size);  line-height: var(--text-6xl-lh); }
.text-7xl  { font-size: var(--text-7xl-size);  line-height: var(--text-7xl-lh); }
.text-8xl  { font-size: var(--text-8xl-size);  line-height: var(--text-8xl-lh); }
.text-9xl  { font-size: var(--text-9xl-size);  line-height: var(--text-9xl-lh); }