/* =========================================================================
   XAME — Design tokens
   Paleta y escalas del rediseño. Cambia aquí y cambia todo el sitio.
   ========================================================================= */

:root {
  /* Marca */
  --xg: #3d9b4a;
  --xg-bright: #4fb35d;
  --xg-deep: #17351f;
  --xg-soft: #e7f0e4;

  /* Neutros */
  --ink: #44484a;
  --ink-2: #5a5f62;
  --ink-3: #71767a;
  --bg: #f2f5f7;
  --bg-2: #e8ecef;
  --panel: #ffffff;
  --line: #dce1e5;
  --line-strong: #c4cacf;

  /* Texto */
  --text: #44484a;
  --text-2: #52575a;
  --text-3: #666c70;
  --text-4: #7a8084;
  --on-dark: #ffffff;
  --on-dark-2: #edf1f3;
  --on-dark-3: #dee3e6;
  --on-dark-4: #c5cbcf;

  /* Tipografía */
  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Escala fluida: se adapta sola entre móvil y escritorio */
  --fs-display: clamp(3.25rem, 10.5vw, 9.25rem);
  --fs-h2: clamp(1.85rem, 4.2vw, 3rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.6rem);
  --fs-lead: clamp(1rem, 1.4vw, 1.06rem);
  --fs-body: 0.975rem;
  --fs-sm: 0.875rem;
  --fs-mono: 0.75rem;
  --fs-mono-sm: 0.66rem;

  /* Ritmo */
  --shell: 1440px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 6rem);
  --gap: clamp(0.75rem, 1.2vw, 1rem);

  /* Cromo */
  --header-h: 74px;
  --topbar-h: 36px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 18px 48px -24px rgba(23, 26, 23, 0.35);
  --shadow-lg: 0 32px 80px -30px rgba(23, 26, 23, 0.5);
  --z-header: 100;
  --z-drawer: 200;
  --z-float: 90;
}