/*
 * Design tokens v2 — fuente: variables del Figma "X-Eleva Group (Website)".
 * Prefijo --xg-* para que nunca choquen con las variables del tema legacy (style.css).
 */
:root {
  /* Color */
  --xg-primary: #66ebe7;
  --xg-primary-on-container: #9cf1ed;
  --xg-primary-container: #00504d;
  --xg-primary-scrim: rgba(0, 80, 77, 0.2);
  --xg-secondary: #ffb2b8;

  --xg-surface: #0e1514;
  --xg-surface-cont-1: #090f0f;
  --xg-surface-cont-2: #161d1c;
  --xg-surface-bright: #343a3a;
  --xg-surface-scrim: rgba(14, 21, 20, 0.6);

  --xg-on-surface: #dde4e2;
  --xg-on-surface-variant: #bec9c7;
  --xg-outline: #889392;
  --xg-outline-variant: #3f4948;

  /* El borde degradado cian → rosa es la firma visual de la marca */
  --xg-gradient-brand: linear-gradient(135deg, var(--xg-primary) 0%, var(--xg-primary) 40%, var(--xg-secondary) 100%);
  --xg-gradient-glow: radial-gradient(circle, rgba(102, 235, 231, 0.18) 0%, rgba(102, 235, 231, 0) 70%);

  /* Tipografía */
  --xg-font-display: "Poppins", system-ui, sans-serif;
  --xg-font-body: "Roboto", system-ui, sans-serif;

  --xg-fs-h2: clamp(2.5rem, 1.6rem + 3.2vw, 3.75rem);
  --xg-fs-h3: clamp(2rem, 1.5rem + 1.9vw, 3rem);
  --xg-fs-h4: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem);
  --xg-fs-h5: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --xg-fs-h6: 1.25rem;
  --xg-fs-subtitle: 1rem;
  --xg-fs-body1: 1rem;
  --xg-fs-body2: 0.875rem;
  --xg-fs-overline: 0.75rem;
  --xg-fs-btn-lg: 1rem;
  --xg-fs-btn-md: 0.875rem;
  --xg-fs-btn-sm: 0.8125rem;

  /* Espaciado (escala del Figma) */
  --xg-space-1: 4px;
  --xg-space-2: 8px;
  --xg-space-3: 12px;
  --xg-space-4: 20px;
  --xg-space-5: 24px;
  --xg-space-6: 40px;
  --xg-space-7: 60px;
  --xg-space-8: 80px;
  --xg-space-9: 120px;

  /* Layout */
  --xg-page-max: 1440px;
  --xg-gutter: clamp(16px, 5.5vw, 80px);
  --xg-inner-pad: clamp(0px, 2.8vw, 40px);
  --xg-nav-height: 60px;

  /* Radios */
  --xg-radius-sm: 10px;
  --xg-radius-md: 12px;
  --xg-radius-lg: 20px;
  --xg-radius-xl: 24px;
  --xg-radius-pill: 100px;

  /* Elevación (M3) */
  --xg-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --xg-elevation-4: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
  --xg-elevation-5: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);

  /* Movimiento */
  --xg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --xg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --xg-dur-fast: 180ms;
  --xg-dur: 320ms;
  --xg-dur-slow: 700ms;
}