/* =========================================================
   BRAINVESTO — DESIGN TOKENS
   =========================================================
   Fuente única de verdad para todo el sistema visual de
   Brainvesto (Home, artículos, categorías, herramientas,
   comentarios, header, footer).

   REGLA: ningún archivo CSS futuro debe declarar un color,
   una sombra, un radius o un valor de espaciado propio.
   Todo se referencia desde aquí. Si falta un valor, se
   añade en este archivo primero y se documenta el motivo.
========================================================= */

:root{

  /* ---------------------------------------------------
     1. COLOR — Paleta base (definida por el proyecto)
  --------------------------------------------------- */
  --primary: #15803D;        /* Verde — acción principal, marca */
  --secondary: #2563EB;      /* Azul — acento informativo, enlaces secundarios */
  --heading: #1F2937;        /* Gris oscuro — todos los títulos */
  --text: #4B5563;           /* Gris medio — texto de cuerpo */
  --background: #FFFFFF;     /* Blanco — fondo base */
  --surface: #F9FAFB;        /* Gris muy claro — cards, secciones alternas */
  --border: #E5E7EB;         /* Gris borde — divisores, contornos de card */
  --accent: #F59E0B;         /* Ámbar — Premium, destacados puntuales, badges "Próximamente" */

  /* ---------------------------------------------------
     2. COLOR — Derivados documentados
     (mismo matiz que su color base; variando solo tono/
     intensidad para hover o fondos suaves. No son colores
     nuevos: existen para no repetir hexadecimales.)
  --------------------------------------------------- */
  --primary-dark: #116830;      /* hover / active de --primary */
  --primary-soft: #E8F5EC;      /* fondo suave sobre --primary (badges, callouts, iconos) */
  --secondary-soft: #EAF1FE;    /* fondo suave sobre --secondary */
  --accent-soft: #FEF3E2;       /* fondo suave sobre --accent */

  /* ---------------------------------------------------
     3. COLOR — Estado
     (necesarios para formularios, validación y comentarios;
     documentados por coherencia con la paleta del proyecto)
  --------------------------------------------------- */
  --success: var(--primary);          /* reutiliza --primary, no es un color nuevo */
  --success-soft: var(--primary-soft);
  --danger: #DC2626;                  /* rojo — errores de formulario, validación */
  --danger-soft: #FDECEC;
  --text-muted: #9CA3AF;              /* metadatos secundarios: fechas, autor, contadores */

  /* ---------------------------------------------------
     4. TIPOGRAFÍA
  --------------------------------------------------- */
  --font-base: "Poppins", sans-serif;

  --fw-regular: 400;   /* texto normal */
  --fw-medium: 500;    /* texto secundario */
  --fw-semibold: 600;  /* botones, subtítulos */
  --fw-bold: 700;      /* títulos */

  /* Escala tipográfica única — Home, artículo, herramientas
     y comentarios comparten esta misma escala (regla #9) */
  --text-xs: 0.8rem;       /* metadatos, etiquetas, badges */
  --text-sm: 0.9rem;       /* texto secundario, captions, botones */
  --text-base: 1rem;       /* cuerpo de texto estándar */
  --text-md: 1.125rem;     /* lead / párrafo introductorio */
  --text-lg: 1.375rem;     /* H3 */
  --text-xl: 1.75rem;      /* H2 */
  --text-2xl: clamp(2rem, 4vw, 2.75rem);   /* H1 de artículo / página interior */
  --text-3xl: clamp(2.4rem, 5vw, 3.6rem);  /* H1 de Home (hero) */

  --leading-tight: 1.3;    /* títulos */
  --leading-normal: 1.6;   /* UI: cards, botones, nav, comentarios */
  --leading-relaxed: 1.8;  /* cuerpo de artículo — lectura cómoda y prolongada */

  /* ---------------------------------------------------
     5. ESPACIADO — escala base 8px
  --------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Espaciado semántico — evita repetir la escala cruda
     directamente dentro de cada componente */
  --space-section: var(--space-9);      /* separación entre secciones grandes */
  --space-card-padding: var(--space-5); /* padding interno estándar de card */
  --space-inline-gap: var(--space-4);   /* separación entre elementos en línea (iconos, tags) */

  /* ---------------------------------------------------
     6. LAYOUT
  --------------------------------------------------- */
  --container-max: 1200px;   /* ancho máximo de página */
  --content-max: 720px;      /* ancho óptimo de lectura (columna de artículo) */
  --header-height: 76px;

  /* ---------------------------------------------------
     7. BORDER RADIUS
  --------------------------------------------------- */
  --radius-sm: 10px;    /* badges, inputs pequeños, tags, iconos de card */
  --radius-md: 16px;    /* cards estándar */
  --radius-lg: 24px;    /* bloques grandes, hero, paneles destacados */
  --radius-full: 999px; /* botones pill, avatares, badges circulares */

  /* ---------------------------------------------------
     8. SOMBRAS — discretas, nunca duras
  --------------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(31, 41, 55, 0.05);  /* reposo */
  --shadow-md: 0 10px 34px rgba(31, 41, 55, 0.08); /* hover / foco */
  --shadow-lg: 0 24px 64px rgba(31, 41, 55, 0.12); /* paneles flotantes, modales */

  /* ---------------------------------------------------
     9. TRANSICIONES
  --------------------------------------------------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* ---------------------------------------------------
     10. Z-INDEX — capa única para evitar conflictos
     entre componentes en fases futuras
  --------------------------------------------------- */
  --z-header: 900;
  --z-mobile-menu: 950;
  --z-back-to-top: 800;
  --z-modal: 1000;
}

/* =========================================================
   REDUCED MOTION — declarado a nivel de tokens para que
   ningún componente futuro tenga que repetirlo
========================================================= */
@media (prefers-reduced-motion: reduce){
  :root{
    --transition-fast: 0.001ms;
    --transition-base: 0.001ms;
    --transition-slow: 0.001ms;
  }
}