/* ==========================================================================
   Tokens de diseño — CORE
   ==========================================================================
   Paleta y tipografía del rediseño CORE (Figma "core"): canvas gris azulado
   muy claro, superficies blancas, bordes #dfe5ef y el azul de marca como
   único color de acción. --primary es el único valor de identidad que
   branding.js pisa en runtime (ver /shared/branding.json); hover, soft y
   focus-ring se derivan de él con color-mix(), así que cambiar el color de
   marca sigue recoloreando todo el sitio sin tocar este archivo.
   Se carga ANTES que base.css y que el CSS de cada página.
   ========================================================================== */

:root {
  /* ---- Fondo y superficies ---- */
  --bg-canvas: #f5f7fb;
  --surface: #ffffff;
  --surface-sunken: #f5f7fb;
  --bg-hover: #f0f3f9;
  --border: #dfe5ef;
  --border-input: #dfe5ef;
  --divider: #edf1f7;

  /* ---- Texto ---- */
  --text-primary: #16223b;
  --text-secondary: #69768c;
  --text-muted: #8a96a9;
  --text-faint: #a0aabb;
  --text-on-primary: #ffffff;
  /* Texto secundario sobre superficies del color de marca (panel de
     identidad, card "Todos", card de socio). */
  --text-on-primary-muted: #dce6ff;

  /* ---- Identidad: el azul de marca es el único color con peso —
     botones primarios, estados activos, foco, selección. ---- */
  --primary: #2455e6;
  --primary-hover: color-mix(in oklab, var(--primary) 88%, black);
  --primary-active: color-mix(in oklab, var(--primary) 75%, black);
  --primary-soft: color-mix(in oklab, var(--primary) 8%, white);
  --primary-soft-fuerte: color-mix(in oklab, var(--primary) 16%, white);
  --focus-ring: 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);

  /* Fondo de las pantallas de entrada (bienvenida y login): plano, el
     azul de marca con órbitas decorativas encima. */
  --entrada-bg: var(--primary);

  /* Fisio: identidad fija (notas, ícono, toggle) — fija en vez de derivada
     de --primary para que siempre se distinga del azul de marca. */
  --celeste: #7c4ddb;
  --celeste-soft: color-mix(in oklab, var(--celeste) 10%, white);

  --critico: #d93a3a;
  --critico-dark: color-mix(in oklab, var(--critico) 80%, black);
  --critico-soft: color-mix(in oklab, var(--critico) 8%, white);

  /* Verde: estados positivos y mensajes de éxito. */
  --success: #1f9d61;
  --success-dark: color-mix(in oklab, var(--success) 75%, black);
  --success-soft: color-mix(in oklab, var(--success) 10%, white);

  /* Ámbar: comentarios/avisos que no son error (comentario de un cliente,
     cambio puntual de turno). --amber-text es el tono legible sobre blanco. */
  --amber: #e8a028;
  --amber-text: #a66b09;
  --amber-soft: color-mix(in oklab, var(--amber) 14%, white);

  /* ---- Espaciado ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Tipografía: DM Sans (Google Fonts).
     El link/preconnect va en el <head> de cada página. ---- */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-base: 0.875rem;  /* 14 */
  --fs-md: 0.9375rem;   /* 15 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 1.875rem;   /* 30 */
  --fs-4xl: 2rem;       /* 32 */
  --fs-5xl: 2.5rem;     /* 40 */

  /* ---- Radios ---- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---- Altura de controles: inputs 48px, botones 46px. Los botones
     compactos (filtros, acciones secundarias en filas) usan --control-h-sm. ---- */
  --input-h: 48px;
  --control-h: 46px;
  --control-h-sm: 38px;

  /* ---- Elevación: el diseño apoya casi todo en el borde; la sombra es
     apenas un empuje. ---- */
  --elevation-sm: 0 2px 4px rgba(23, 36, 61, 0.06);
  --elevation-sm-hover: 0 4px 12px rgba(23, 36, 61, 0.08);
  --elevation-md: 0 8px 24px rgba(23, 36, 61, 0.10);
  --elevation-lg: 0 16px 48px rgba(23, 36, 61, 0.18);
  --elevation-primary: 0 4px 8px color-mix(in srgb, var(--primary) 28%, transparent);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration: 200ms;
}