/* style_global.css */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

/* =========================
  VARIABLES
  ========================= */
:root {
  /* Tipografía */
  --font-primary: 'Jost', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Tamaños base */
  --font-size-base-desktop: 16px;

  /* Tamaños de fuente Desktop */
  --font-size-h1-desktop: 4rem;         /* 64px */
  --font-size-h2-desktop: 2rem;         /* 32px */
  --font-size-h3-desktop: 1.5rem;       /* 24px */
  --font-size-h4-desktop: 1rem;         /* 16px */
  --font-size-p-light-desktop: 1.2rem;  /* 19.2px */
  --font-size-p-regular-desktop: 1rem;  /* 16px */
  --font-size-small-desktop: 1rem;      /* 16px */

  /* Tamaños de fuente Tablet */
  --font-size-h1-tablet: 3.2rem;        /* 51.2px */
  --font-size-h2-tablet: 1.6rem;        /* 25.6px */
  --font-size-h3-tablet: 1.4rem;        /* 22.4px */
  --font-size-h4-tablet: 2rem;          /* 32px */
  --font-size-p-light-tablet: 1.1rem;   /* 17.6px */
  --font-size-p-regular-tablet: 0.95rem;/* 15.2px */
  --font-size-small-tablet: 0.9rem;     /* 14.4px */

  /* Tamaños de fuente Móvil */
  --font-size-h1-mobile: 2.5rem;        /* 40px */
  --font-size-h2-mobile: 1.5rem;        /* 24px */
  --font-size-h3-mobile: 1.4rem;        /* 22.4px */
  --font-size-h4-mobile: 1.1rem;        /* 17.6px */
  --font-size-p-light-mobile: 1rem;     /* 16px */
  --font-size-p-regular-mobile: 0.9rem; /* 14.4px */
  --font-size-small-mobile: 0.8rem;     /* 12.8px */

  /* Colores */
  --color-primary-bg: #F5F1EA;
  --color-secondary-base: #D5BDAF;
  --color-secondary-hover: #B79B8C;
  --color-neutral-white: #FFFFFF;
  --color-neutral-beige: #E9E4DD;
  --color-neutral-gray-dark: #3A3A3A;
  --color-neutral-gray-darker: #202020;
  --color-error: #BA1A1A;
  --color-disabled: #B0B0B0;

  /* Colores de texto */
  --color-text-primary: var(--color-neutral-gray-darker);
  --color-text-secondary: var(--color-neutral-gray-dark);
}

/* =========================
  BASE
  ========================= */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base-desktop);
  color: var(--color-text-primary);
  background-color: var(--color-primary-bg);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* =========================
  TITULOS
  ========================= */
h1 {
  font-size: var(--font-size-h1-desktop);
  font-weight: var(--font-weight-bold);
}
h2 {
  font-size: var(--font-size-h2-desktop);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0.75rem;
}
h3 {
  font-size: var(--font-size-h3-desktop);
  font-weight: var(--font-weight-light);
  margin-bottom: 0.5rem;
}
h4 {
  font-size: var(--font-size-h4-desktop);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0.5rem;
}

/* =========================
  PÁRRAFOS Y VARIACIONES
  ========================= */
p.light {
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-p-light-desktop);
  margin-bottom: 1rem;
}
p.regular {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-p-regular-desktop);
  margin-bottom: 1rem;
}
small {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-small-desktop);
}

/* =========================
  COLORES DE TEXTO
  ========================= */
.error-text {
  color: var(--color-error);
}
.accent {
  color: var(--color-secondary-base);
}

/* =========================
  RESPONSIVE: MÓVIL
  ========================= */
@media (max-width: 768px) {
  body {
   font-size: var(--font-size-base-desktop);
   color: var(--color-text-primary);
  }
  h1 {
   font-size: var(--font-size-h1-mobile);
  }
  h2 {
   font-size: var(--font-size-h2-mobile);
   font-weight: var(--font-weight-medium);
  }
  h3 {
   font-size: var(--font-size-h3-mobile);
   font-weight: var(--font-weight-light);
  }
  h4 {
   font-size: var(--font-size-h4-mobile);
   font-weight: var(--font-weight-medium);
  }
  p.light {
   font-size: var(--font-size-p-light-mobile);
  }
  p.regular {
   font-size: var(--font-size-p-regular-mobile);
  }
  small {
   font-size: var(--font-size-small-mobile);
  }
}