/*
  Sistema de diseño MOVIMIENTÚ — un solo lugar para todo lo que se repite
  visualmente en el sitio. Cambiá un valor acá y se propaga a todo el sitio.
  Fuente: SISTEMA_VISUAL.md del paquete de marca.
*/

:root {
  /* ---- Color: paleta de marca ---- */
  --color-purple: #655FA6;
  --color-purple-light: #8D84CC;
  --color-black: #121216;
  --color-white: #FFFFFF;
  --color-ivory: #F5F2EC;
  --color-gray: #B9B6C2;

  /* ---- Color: neutros derivados (superficies y texto secundario) ---- */
  --color-gray-soft: #8B8796;     /* texto secundario sobre fondo oscuro — cumple contraste AA (5.34:1) */
  --color-text-on-ivory: #5a5760; /* texto secundario sobre fondo marfil */
  --color-text-strong: #D8D6DE;   /* texto de cuerpo sobre superficies oscuras elevadas */
  --color-surface-1: #17171d;     /* tarjetas oscuras elevadas (form, trayectoria) */
  --color-surface-2: #1c1c22;     /* placeholders de imagen sobre fondo oscuro */
  --color-surface-3: #0f0f13;     /* fondo de imagen en tarjetas de trayectoria */
  --color-surface-light: #e7e3da; /* placeholders de imagen sobre fondo marfil */
  --color-error: #e39ca0;

  /* ---- Color: opacidades usadas como "tinte" de marca sobre fondos oscuros/claros ---- */
  --color-purple-wash: rgba(101, 95, 166, .18);
  --color-purple-wash-strong: rgba(101, 95, 166, .14);
  --color-purple-light-wash: rgba(141, 132, 204, .18);
  --color-border-soft: rgba(185, 182, 194, .16);
  --color-border-softer: rgba(185, 182, 194, .22);
  --color-border-faint: rgba(185, 182, 194, .28);

  /* ---- Tipografía ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  /* ---- Radios ---- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 100px;

  /* ---- Sombras ---- */
  --shadow-card-hover: 0 18px 40px -24px rgba(18, 18, 22, .4);
  --shadow-cta: 0 12px 30px -10px rgba(101, 95, 166, .7);

  /* ---- Transiciones ---- */
  --ease-standard: ease;
  --duration-fast: .25s;
  --duration-base: .35s;
  --duration-slow: .5s;
  --duration-reveal: .8s;
  --duration-hero: .9s;

  /* ---- Layout ---- */
  --content-max: 1400px;
  --content-max-narrow: 1200px;
  --section-pad-x: 40px;
  --section-pad-y: clamp(80px, 10vw, 140px);

  /* ---- Breakpoints (documentales — se usan como comentario de referencia en responsive.css,
     los @media no pueden leer variables CSS, pero se mantienen sincronizados a mano) ----
     --bp-nav: 860px      → header pasa de menú horizontal a botón hamburguesa
     --bp-cards: 560px    → grillas de 2 columnas pasan a 1 columna para no apretar el texto
  */
}