/* ============================================================
   4d3 — Design tokens
   Fuente única de verdad. NO editar en los proyectos: este
   archivo se sobreescribe con cada versión del framework.
   Los colores de marca en hex viven SOLO aquí (INVARIANTE 5).
   ============================================================ */

:root {
  /* --- Tricromía (orden fijo: verde → azul → coral) --- */
  --pastel-green: #8BC990;
  --pastel-blue:  #7BA3D8;
  --pastel-coral: #E8837B;

  /* Variantes oscuras (hover / texto sobre fondo claro) */
  --dark-green: #5A9960;
  --dark-blue:  #5B83B8;
  --dark-coral: #C8635B;

  /* --- Neutros --- */
  --white:      #FFFFFF;
  --off-white:  #FAFAFA;
  --gray-light: #E8E8E8;
  --gray-mid:   #888888;
  --gray-dark:  #333333;

  /* --- Gradiente de triada (loader, color-bar, <strong>) --- */
  --triad-gradient: linear-gradient(90deg,
      var(--pastel-green), var(--pastel-blue), var(--pastel-coral));

  /* --- Tipografía --- */
  --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;

  /* Escala fluida: clamp() siempre, nunca font-size en media queries */
  --text-hero:     clamp(2.5rem, 6vw, 4.5rem);
  --text-title:    clamp(2rem, 4.5vw, 3rem);
  --text-subtitle: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-body:     clamp(1rem, 1.05vw, 1.125rem);
  --text-stat:     clamp(2rem, 4vw, 3rem);
  --text-price:    clamp(2.5rem, 5vw, 3.5rem);
  --text-small:    0.875rem;
  --text-label:    0.8125rem;

  --tracking-mono: 0.1em;

  /* --- Movimiento --- */
  --micro:   0.3s ease;      /* microinteracciones: hovers, fills */
  --reveal:  0.8s ease-out;  /* reveals con IntersectionObserver */
  --stagger: 0.1s;           /* retardo entre hermanos en cascada */

  /* --- Layout --- */
  --container-narrow: 800px;   /* lectura: hero, about, precio, contacto */
  --container-wide:  1200px;   /* grids: servicios, valores, footer */

  /* --- Bordes / radios / sombras --- */
  --border-thin: 1px solid var(--gray-light);
  --border-btn:  2px;
  --radius:       0;     /* marca geométrica: esquinas vivas por defecto */
  --radius-small: 4px;   /* solo componentes pequeños */
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-nav:  0 2px 20px rgba(0, 0, 0, 0.05);
}