:root {
  /* === Colores === */
  --mfm-color-brand:        #003EA2;
  --mfm-color-accent:       #FFD700;
  --mfm-color-live:         #E31E24;
  --mfm-color-whatsapp:     #35D366;
  --mfm-color-white:        #FFFFFF;
  --mfm-color-black:        #000000;
  --mfm-color-gris-100:     #F5F5F5;
  --mfm-color-gris-200:     #E5E5E5;
  --mfm-color-gris-300:     #C4C4C4;
  --mfm-color-gris-400:     #A0A0A0;
  --mfm-color-gris-500:     #7A7A7A;
  --mfm-color-gris-600:     #626262;
  --mfm-color-gris-700:     #3D3D3D;
  --mfm-color-gris-800:     #1E1E1E;

  /* === Sombras === */
  --mfm-shadow-color:       rgba(0, 0, 0, 0.08);
  --mfm-shadow-blur-sm:     4px;
  --mfm-shadow-blur-md:     10px;
  --mfm-shadow-offset-y:    4px;
  --mfm-backdrop-blur-sm:   4px;

  /* === Fuentes === */
  --mfm-font-heading:       'Plus Jakarta Sans', sans-serif;
  --mfm-font-body:          'DM Sans', sans-serif;
  --mfm-font-program:       'Montserrat', sans-serif;

  /* === Escala tipográfica (Desktop) === */
  --mfm-text-display-xl:    36px;
  --mfm-text-display-lg:    32px;
  --mfm-text-display-md:    30px;
  --mfm-text-display-sm:    25px;
  --mfm-text-h1:            24px;
  --mfm-text-h2:            22px;
  --mfm-text-h3:            20px;
  --mfm-text-h4:            18px;
  --mfm-text-h5:            16px;
  --mfm-text-h6:            14px;
  --mfm-text-label-lg:      20px;
  --mfm-text-label-md:      16px;
  --mfm-text-label-sm:      12px;
  --mfm-text-button-lg:     20px;
  --mfm-text-button-md:     16px;
  --mfm-text-button-sm:     14px;
  --mfm-text-body-lg:       20px;
  --mfm-text-body-md:       18px;
  --mfm-text-body-sm:       16px;
  --mfm-text-body-xs:       14px;
  --mfm-text-caption-lg:    16px;
  --mfm-text-caption-md:    12px;
  --mfm-text-caption-sm:    10px;
  --mfm-text-program-title: 22px;
  --mfm-text-program-sub:   16px;
  --mfm-text-program-meta:  16px;

  /* === Spacing (Desktop) === */
  --mfm-space-4:  4px;   --mfm-space-8:  8px;   --mfm-space-12: 12px;
  --mfm-space-16: 16px;  --mfm-space-20: 20px;  --mfm-space-24: 24px;
  --mfm-space-32: 32px;  --mfm-space-40: 40px;  --mfm-space-48: 48px;
  --mfm-space-64: 64px;

  /* === Border radius === */
  --mfm-radius-2xs:  2px;
  --mfm-radius-xs:   5px;
  --mfm-radius-sm:   10px;
  --mfm-radius-md:   16px;
  --mfm-radius-lg:   20px;
  --mfm-radius-full: 100px;

  /* === Icon sizes === */
  --mfm-icon-3xs: 4px;   --mfm-icon-2xs: 8px;   --mfm-icon-xs:  12px;
  --mfm-icon-sm:  16px;  --mfm-icon-md:  20px;  --mfm-icon-lg:  24px;
  --mfm-icon-xl:  32px;  --mfm-icon-2xl: 40px;
}

@media (max-width: 1024px) {
  :root {
    --mfm-text-display-xl: 30px;
    --mfm-text-display-lg: 28px;
    --mfm-text-display-md: 26px;
    --mfm-text-display-sm: 22px;
    --mfm-text-h1: 22px;
    --mfm-text-h2: 20px;
    --mfm-text-h3: 18px;
    --mfm-text-h4: 16px;
    --mfm-text-h5: 16px;
    --mfm-text-h6: 14px;
    --mfm-text-label-lg: 18px;
    --mfm-text-label-md: 16px;
    --mfm-text-label-sm: 12px;
    --mfm-text-button-lg: 18px;
    --mfm-text-button-md: 16px;
    --mfm-text-button-sm: 14px;
    --mfm-text-body-lg: 18px;
    --mfm-text-body-md: 16px;
    --mfm-text-body-sm: 16px;
    --mfm-text-body-xs: 14px;
    --mfm-text-caption-lg: 14px;
    --mfm-text-caption-md: 12px;
    --mfm-text-caption-sm: 10px;
    --mfm-text-program-title: 20px;
    --mfm-text-program-sub: 14px;
    --mfm-text-program-meta: 14px;

    --mfm-space-64: 48px;
    --mfm-space-48: 32px;
    --mfm-space-40: 32px;
    --mfm-space-32: 24px;
    --mfm-space-24: 20px;
    --mfm-space-20: 16px;
    --mfm-space-16: 16px;
    --mfm-space-12: 12px;
    --mfm-space-8: 8px;
    --mfm-space-4: 4px;
  }
}

@media (max-width: 767px) {
  :root {
    --mfm-text-display-xl: 24px;
    --mfm-text-display-lg: 22px;
    --mfm-text-display-md: 20px;
    --mfm-text-display-sm: 18px;
    --mfm-text-h1: 18px;
    --mfm-text-h2: 16px;
    --mfm-text-h3: 16px;
    --mfm-text-h4: 16px;
    --mfm-text-h5: 14px;
    --mfm-text-h6: 14px;
    --mfm-text-label-lg: 16px;
    --mfm-text-label-md: 14px;
    --mfm-text-label-sm: 12px;
    --mfm-text-button-lg: 16px;
    --mfm-text-button-md: 14px;
    --mfm-text-button-sm: 14px;
    --mfm-text-body-lg: 16px;
    --mfm-text-body-md: 16px;
    --mfm-text-body-sm: 14px;
    --mfm-text-body-xs: 14px;
    --mfm-text-caption-lg: 14px;
    --mfm-text-caption-md: 12px;
    --mfm-text-caption-sm: 10px;
    --mfm-text-program-title: 16px;
    --mfm-text-program-sub: 14px;
    --mfm-text-program-meta: 14px;

    --mfm-space-64: 32px;
    --mfm-space-48: 24px;
    --mfm-space-40: 24px;
    --mfm-space-32: 16px;
    --mfm-space-24: 16px;
    --mfm-space-20: 12px;
    --mfm-space-16: 12px;
    --mfm-space-12: 12px;
    --mfm-space-8: 8px;
    --mfm-space-4: 4px;
  }
}