/* tokens.css — Nodalya, sitio público
 *
 * ARCHIVO GENERADO. No editar a mano: se regenera con
 *   node scripts/build-tokens.mjs
 *
 * Fuente: C:/dev/design-master/plugin/system/tokens.json
 * Color de marca del proyecto: #075BEA (DESIGN.md §2)
 *
 * Contraste verificado con system/check-contrast.mjs: 17 de 17 pares pasan.
 * Blanco sobre cobalto = 5,69:1.
 */

:root {
  /* ── Color: marca ────────────────────────────────────────────────── */
  --brand-primary: #075BEA;
  --brand-onPrimary: #FFFFFF;

  /* ── Color: escala neutral ───────────────────────────────────────── */
  --neutral-0: #FFFFFF;
  --neutral-50: #FAFAFA;
  --neutral-100: #EDF3F9;
  --neutral-200: #D9E2ED;
  --neutral-300: #D4D4D4;
  --neutral-400: #949494;
  --neutral-500: #657A91;
  --neutral-600: #4B6179;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #071833;
  --neutral-950: #0A0A0A;

  /* ── Color: semántico ────────────────────────────────────────────── */
  --semantic-error: #B42318;
  --semantic-warning: #8A5700;
  --semantic-success: #087D4B;
  --semantic-info: #1D4ED8;

  /* ── Color: texto ────────────────────────────────────────────────── */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-disabled: var(--neutral-500);
  --text-onBrand: var(--brand-onPrimary);

  /* ── Color: superficies ──────────────────────────────────────────── */
  --surface-page: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-raised: var(--neutral-0);
  --surface-disabled: var(--neutral-200);
  --surface-overlay: #00000099;

  /* ── Color: bordes ───────────────────────────────────────────────── */
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-500);
  --border-focus: var(--brand-primary);

  /* ── Espaciado ───────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Radios ──────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-control: 8px;
  --radius-surface: 12px;
  --radius-modal: 16px;
  --radius-sheet: 24px;
  --radius-full: 9999px;

  /* ── Tipografía: familia ─────────────────────────────────────────── */
  --fontFamily-base: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── Tipografía: peso ────────────────────────────────────────────── */
  --fontWeight-regular: 400;
  --fontWeight-semibold: 600;

  /* ── Tipografía: tamaño ──────────────────────────────────────────── */
  --fontSize-xs: 12px;
  --fontSize-sm: 14px;
  --fontSize-base: 16px;
  --fontSize-md: 18px;
  --fontSize-lg: 20px;
  --fontSize-xl: 24px;
  --fontSize-2xl: 32px;
  --fontSize-3xl: 40px;
  --fontSize-4xl: 56px;

  /* ── Tipografía: interlínea ──────────────────────────────────────── */
  --lineHeight-xs: 18px;
  --lineHeight-sm: 21px;
  --lineHeight-base: 24px;
  --lineHeight-md: 27px;
  --lineHeight-lg: 30px;
  --lineHeight-xl: 30px;
  --lineHeight-2xl: 40px;
  --lineHeight-3xl: 44px;
  --lineHeight-4xl: 62px;

  /* ── Tipografía: espaciado ───────────────────────────────────────── */
  --letterSpacing-xs: 0px;
  --letterSpacing-sm: 0px;
  --letterSpacing-base: 0px;
  --letterSpacing-md: 0px;
  --letterSpacing-lg: -0.2px;
  --letterSpacing-xl: -0.24px;
  --letterSpacing-2xl: -0.64px;
  --letterSpacing-3xl: -0.8px;
  --letterSpacing-4xl: -1.12px;

  /* ══ Extensiones del sitio — DESIGN.md §4 ══════════════════════════ */

  /* Fondo de las bandas oscuras. La escala neutral no tiene un azul profundo, y el negro puro rompe con la foto del hero. */
  --nd-navy-deep: #04142F;

  /* Fondo de bloques destacados. Ya existe en la marca de la app. */
  --nd-cobalt-soft: #E7EFFF;

  /* Cobalto más oscuro, para el estado activo del botón. */
  --nd-cobalt-dark: #0648BD;

  /* Verde oficial de WhatsApp, solo para el botón flotante de contacto: la burbuja se reconoce por ese color o no se reconoce. */
  --nd-whatsapp: #25D366;

  /* Tipografía de marca de Nodalya. Solo titulares; el cuerpo entero es Inter. */
  --fontFamily-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Ancho máximo de columna de texto. Lo pide tokens.md §3 y el sistema no lo expresa como token. */
  --measure: 66ch;

  /* Ancho del contenedor de la página. */
  --container: 1120px;
}