/* ======================================================
   TOKENS DE DISEÑO EXTENDIDOS - Coaching y Resulta2
   Sistema base para diseño responsivo y coherente
   ====================================================== */

:root {
  /* 🎨 Colores principales (extraídos del logo) */
  --color-azul-profundo: #2F3E6F;   /* confianza */
  --color-dorado: #CFA544;           /* éxito, crecimiento */
  --color-gris-claro: #F5F6FA;
  --color-gris-oscuro: #1F2937;
  --color-menta: #14B8A6;
  --color-exito: #22C55E;
  --color-error: #EF4444;
  --color-blanco: #FFFFFF;
  --color-negro: #000000;

  /* 🌈 Alias funcionales */
  --color-fondo: var(--color-gris-claro);
  --color-texto: var(--color-gris-oscuro);
  --color-primario: var(--color-azul-profundo);
  --color-secundario: var(--color-dorado);
  --color-acento: var(--color-menta);
  --color-borde: rgba(0, 0, 0, 0.1);

  /* ✍️ Tipografías */
  --fuente-principal: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fuente-secundaria: "Playfair Display", serif;

  /* 🔠 Escala tipográfica fluida */
  --fs-xxl: clamp(32px, 4vw, 48px);
  --fs-xl: clamp(24px, 3vw, 32px);
  --fs-lg: clamp(20px, 2.2vw, 24px);
  --fs-md: clamp(17px, 1.8vw, 18px);
  --fs-sm: 16px;
  --fs-xs: 14px;

  /* 📏 Espaciado (8 pt grid system) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 🧩 Bordes y sombras */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --sombra-suave: 0 4px 10px rgba(0,0,0,0.05);
  --sombra-media: 0 8px 20px rgba(0,0,0,0.1);
  --sombra-fuerte: 0 12px 32px rgba(0,0,0,0.15);

  /* ⏱ Transiciones globales */
  --transicion-base: all 0.3s ease-in-out;

  /* 📱 Breakpoints responsivos */
  --bp-xs: 360px;   /* móviles pequeños */
  --bp-sm: 480px;   /* móviles estándar */
  --bp-md: 768px;   /* tablets */
  --bp-lg: 1024px;  /* laptops */
  --bp-xl: 1280px;  /* pantallas grandes */
  --bp-xxl: 1536px; /* pantallas ultra anchas */

  /* ⚖️ Contenedores y límites */
  --ancho-maximo: 1280px;
  --ancho-contenedor: min(90%, var(--ancho-maximo));
}

/* ======================================================
   ESTILO BASE
   ====================================================== */

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-principal);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  transition: var(--transicion-base);
}

/* Tipografía base */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primario);
  font-family: var(--fuente-secundaria);
  margin-top: 0;
}

h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { font-size: var(--fs-sm); }

/* ======================================================
   RESPONSIVIDAD GLOBAL
   ====================================================== */

/* Tablets */
@media (max-width: var(--bp-md)) {
  body {
    font-size: 15px;
  }
  h1 { font-size: clamp(28px, 5vw, 38px); }
}

/* Móviles */
@media (max-width: var(--bp-sm)) {
  h1 { font-size: clamp(24px, 6vw, 32px); }
  h2 { font-size: clamp(20px, 5vw, 26px); }
  h3 { font-size: clamp(18px, 4.5vw, 22px); }
}