/* ============================================================
   EL VAGAL — Design Tokens  (Fase 0)
   ------------------------------------------------------------
   Identidad nueva: laboratorio cálido, terroso, pixel-friendly.
   Reemplaza la estética vieja (morado/rojo/neón de design-tokens.css).
   Fuente de verdad: diseño "El Vagal - Web" de Claude Design + PLAN-REDISENO.
   Sistema de GRADIENTE: la intensidad baja de "comunidad" a "zona seria".
   ============================================================ */

/* Fuentes: Syne (títulos) + DM Sans (cuerpo) + Press Start 2P (labels)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Press+Start+2P&display=swap');

:root {
  /* ----- PALETA BASE EL VAGAL ------------------------------ */
  --vagal-crema:        #F5EFE0;   /* fondo principal (base serena) */
  --vagal-crema-2:      #EDE5D2;   /* fondo alterno / cards */
  --vagal-tinta:        #1A1714;   /* texto, contornos, cuerpo del vaguito */
  --vagal-tinta-2:      #3A332C;   /* texto secundario */
  --vagal-terracota:    #C56A3E;   /* acento de acción (energía) */
  --vagal-terracota-dim:#A8542F;   /* terracota hover/oscuro */
  --vagal-verde-bit:    #5A8A6B;   /* acento secundario (vivo, gamer) */
  --vagal-verde-bit-dim:#487058;

  /* Tonos terrosos para acentos de proyecto (cada uno su color) */
  --acc-cultura:        #B5713C;   /* terracota cultura */
  --acc-tecnologia:     #3E7C88;   /* azul petróleo */
  --acc-politica:       #9C5A44;   /* arcilla */
  --acc-ambiente:       #6E7F5B;   /* musgo */
  --acc-datos:          #6B5B73;   /* violeta mineral (zona seria) */

  /* ----- NEUTRALS (claro primero — base crema) ------------- */
  --bg:                 var(--vagal-crema);
  --bg-alt:             var(--vagal-crema-2);
  --bg-card:            #FBF7EC;
  --bg-serio:           #EFE9DA;   /* fondo "zona seria" (aún más calmado) */

  --fg:                 var(--vagal-tinta);
  --fg-muted:           var(--vagal-tinta-2);
  --fg-faint:           rgba(26,23,20,0.55);

  --border-soft:        rgba(26,23,20,0.12);
  --border-line:        rgba(26,23,20,0.18);

  /* ----- SEMÁNTICOS ---------------------------------------- */
  --accent:             var(--vagal-terracota);
  --accent-hover:       var(--vagal-terracota-dim);
  --accent-2:           var(--vagal-verde-bit);
  --link:               var(--vagal-terracota-dim);
  --link-hover:         var(--vagal-terracota);

  /* ----- TIPOGRAFÍA ---------------------------------------- */
  --font-display:       'Syne', system-ui, sans-serif;   /* títulos */
  --font-body:          'DM Sans', system-ui, sans-serif; /* cuerpo/UI */
  --font-pixel:         'Press Start 2P', monospace;      /* SOLO labels chicos */

  /* Escala tipográfica */
  --fs-hero:            clamp(3rem, 9vw, 7rem);
  --fs-h1:              clamp(2rem, 5vw, 3.5rem);
  --fs-h2:              clamp(1.5rem, 3.5vw, 2.25rem);
  --fs-body:            1.0625rem;
  --fs-small:           0.875rem;
  --fs-label:           0.625rem;   /* labels pixel ("FRENTES ACTIVOS") */

  /* ----- ESPACIADO / RADIOS / MOTION ----------------------- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-6: 3rem;   --space-8: 4rem;
  --radius:  4px;     --radius-lg: 8px;

  /* Motion orgánico, lento (respeta prefers-reduced-motion abajo) */
  --ease-organic:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-slow:          800ms;
  --dur-med:           450ms;

  /* GRADIENTE DE INTENSIDAD (variable de zona) ---------------
     Cambiar --zona en un contenedor ajusta la "energía" de esa sección.
     comunidad = vivo · proyectos = medio · seria = calmado            */
  --zona-bg:           var(--bg);
  --zona-accent:       var(--accent);
  --zona-motion:       1;          /* 1 = animación plena; 0.3 = atenuada */
}

/* Zona COMUNIDAD (entrada, talento) — máxima energía */
.zona-comunidad {
  --zona-bg:     var(--vagal-crema);
  --zona-accent: var(--vagal-terracota);
  --zona-motion: 1;
}
/* Zona PROYECTOS — media */
.zona-proyectos {
  --zona-bg:     var(--vagal-crema-2);
  --zona-accent: var(--vagal-verde-bit);
  --zona-motion: 0.6;
}
/* Zona SERIA (datos, servicios, clientes) — calmada/pastel */
.zona-seria {
  --zona-bg:     var(--bg-serio);
  --zona-accent: var(--acc-datos);
  --zona-motion: 0.3;
}

/* Accesibilidad: si el usuario pide menos movimiento, todo se calma */
@media (prefers-reduced-motion: reduce) {
  :root { --zona-motion: 0; --dur-slow: 0ms; --dur-med: 0ms; }
}