/**
 * Design Tokens — Scoops XI
 * -------------------------
 * Valores EXACTOS del sistema de diseño oficial (portados de la landing v1).
 * Solo se incluyen los tokens que la landing USA — no la gama 50–900 completa.
 * Si una sección necesita un step extra, agregalo acá (las escalas viven en Figma).
 *
 * Identidad: LISTEN (azul) · SOLVE (oscuro) · SCALE (rosa).
 */
:root {
  /* ================= COLOR ================= */

  /* ---- Primary · Blue (color.primary) — "Listen": foco, links, datos ---- */
  --color-primary: #00b8e6; /* 500 base */
  --color-primary-hover: #009dc6; /* 600 */
  --color-primary-soft: #ecfcff; /* 50 — fondos suaves */
  --color-primary-100: #c8f4ff;

  /* ---- Accent · Pink (color.accent) — "Scale": CTAs, métricas críticas ---- */
  --color-accent: #e5007e; /* 500 base */
  --color-accent-hover: #c2006b; /* 600 */
  --color-accent-soft: #ffeaf5; /* 50 */
  --color-accent-200: #ff99cc;

  /* ---- Secondary · Lavender (color.secondary) — fondos de marca, ilustración ---- */
  --color-lavender: #8c8ae6; /* 500 */
  --color-lavender-soft: #f4f3fe; /* 50 */
  --color-lavender-100: #e6e4fb;
  --color-lavender-700: #4c4170; /* violeta profundo — texto de chat / insight */

  /* ---- Dark · Neutral (color.neutral) — texto, bordes, fondos ---- */
  --color-ink: #0f1117; /* 900 — "Solve", texto fuerte / secciones dark */
  --color-text: #1f2937; /* 800 — texto de cuerpo */
  --color-text-muted: #6b7280; /* 500 — texto secundario */
  --color-neutral-600: #4b5563; /* 600 — texto de descripciones */
  --color-neutral-400: #9ca3af;
  --color-neutral-200: #e5e7eb;
  --color-neutral-100: #f3f4f6;
  --color-white: #ffffff;

  /* ---- Superficie · Fondo · Borde (semánticos) ---- */
  --color-bg: #ffffff; /* Background — fondo de página (blanco: las cards se
                          definen por su borde, no por contraste de fondo) */
  --color-surface: #ffffff; /* Surface — cards, paneles, inputs */
  --color-surface-subtle: #f3f4f6; /* Surface Subtle — zonas alternas, hover */
  --color-surface-dark: #0f1117; /* Surface Dark — footer, secciones inmersivas */
  --color-border: #e5e7eb; /* Border — bordes por defecto */
  --color-border-subtle: #f3f4f6; /* Border Subtle — divisores internos */

  /* ---- Feedback (semánticos) ---- */
  --color-success: #12b76a;
  --color-warning: #f97316;
  --color-error: #f04438;
  --color-info: #2e90fa;

  /* ---- Gradientes ---- */
  --gradient-brand: linear-gradient(135deg, #00b8e6 0%, #e5007e 100%); /* Listen → Scale */
  --gradient-hero: linear-gradient(160deg, #f4f3fe 0%, #ecfcff 100%); /* lavanda → celeste suave */
  --gradient-accent: linear-gradient(135deg, #e5007e 0%, #8c8ae6 100%);

  /* ================= TIPOGRAFÍA ================= */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* títulos, métricas, CTA, botones */
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* cuerpos, labels, captions */
  --font-sans: var(--font-body); /* alias por compatibilidad */

  /* Escala tipográfica (font-size / line-height del sistema).
     Los clamp() hacen responsive el tramo grande; el max es el valor de diseño. */
  --fs-display-xl: clamp(2.75rem, 7vw, 6rem); /* 96 / 0.92 — Inter 900 — Hero principal */
  --fs-display-l: clamp(2.5rem, 5.5vw, 4.5rem); /* 72 / 1.0  — Inter 900 — Hero secundario */
  --fs-h1: clamp(2rem, 4.5vw, 3.5rem); /* 56 / 1.05 — Inter 800 */
  --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem); /* 40 / 1.1  — Inter 700 */
  --fs-h3: clamp(1.375rem, 2.2vw, 1.875rem); /* 30 / 1.2  — Inter 700 */
  --fs-h4: 1.5rem; /* 24 / 1.3  — Inter 600 — Card title */
  --fs-title: 1.25rem; /* 20 / 1.4  — Inter 600 — Encabezado UI */
  --fs-subtitle: 1.125rem; /* 18 / 1.5  — Montserrat 600 */
  --fs-body-lg: 1.125rem; /* 18 / 1.6  — Montserrat 400 — intro/lead */
  --fs-body: 1rem; /* 16 / 1.6  — Montserrat 400 — texto base */
  --fs-small: 0.875rem; /* 14 / 1.5  — Montserrat 400 — texto denso / labels */
  --fs-caption: 0.75rem; /* 12 / 1.4  — Montserrat 500 — pies, metadatos */

  /* alias legacy */
  --fs-hero: var(--fs-display-xl);

  /* line-heights de referencia */
  --lh-display: 0.95;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ================= LAYOUT / GRID ================= */
  /* Grid: 12 columnas · gutter 24px · margen 168px (canvas desktop 1680) */
  --container-max: 1344px; /* 1680 − 2×168 */
  --container-wide: 1680px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  /* Padding lateral GLOBAL: se mantiene igual en TODA la landing (ajustable acá). */
  --page-padding-x: 10%;
  --space-gutter: clamp(1rem, 5vw, 2.5rem);

  /* ================= ESPACIADO (base 4px) ================= */
  --space-1: 0.25rem; /* 4  */
  --space-2: 0.5rem; /* 8  */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-24: 6rem; /* 96 */
  --section-y: clamp(4rem, 8vw, 7rem); /* padding vertical de sección */

  /* ================= RADIOS ================= */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ================= ELEVACIÓN (sombras suaves y difusas) ================= */
  --shadow-sm: 0 1px 2px rgba(15, 17, 23, 0.06), 0 1px 3px rgba(15, 17, 23, 0.1); /* inputs, chips */
  --shadow-md: 0 8px 24px rgba(15, 17, 23, 0.08); /* cards */
  --shadow-lg: 0 24px 60px rgba(15, 17, 23, 0.14); /* modales, popovers */
  --shadow-glow: 0 0 40px rgba(0, 184, 230, 0.4); /* CTA / brand — glow azul */
  --shadow-glow-accent: 0 0 40px rgba(229, 0, 126, 0.4); /* glow rosa */

  /* ================= MISC ================= */
  --icon-stroke: 1.75; /* iconografía lineal */
  --nav-height: 72px;
  --transition: 200ms ease;
}