/* ZURAI · tokens de marca (manual de marca v2.0, octubre 2026)
 * Fuente única para web y Blazor. Las fuentes van aparte en zurai-fuentes.css
 * (en Next.js se reemplaza por next/font). Para Tailwind 4 usar zurai-tailwind.css,
 * que importa este archivo.
 * Capas: (1) oficiales del manual, (2) grises tomados de los SVG oficiales,
 * (3) extensiones derivadas (no están en el manual; ver references/extensiones.md),
 * (4) roles semánticos: los componentes usan SOLO los roles.
 */


:root {
  /* (1) Oficiales. Proporción por pieza: Ink 60 · Paper 25 · Cobalt 10 · Signal 5 */
  --zurai-ink: #0E0F1A;      /* texto, fondos oscuros, ícono */
  --zurai-paper: #F6F4EF;    /* fondo principal */
  --zurai-cobalt: #2F4BFF;   /* interfaz: enlaces, botones, interactivos */
  --zurai-signal: #F04E1B;   /* EXCLUSIVO del cursor y acentos gráficos. Nunca texto ni botones */
  --zurai-blanco: #FFFFFF;

  /* (2) Grises de los SVG oficiales */
  --zurai-gris-700: #4A4E63; /* separador de firma en negativo */
  --zurai-gris-500: #6B6F7B; /* subtexto sobre claro (4,57:1 sobre Paper; 5,0:1 sobre blanco) */
  --zurai-gris-300: #B9BCC8; /* subtexto sobre Ink (10,1:1) */
  --zurai-gris-200: #C9C6BE; /* separador de firma sobre claro */

  /* (3) Extensiones derivadas: aprobadas por Matias (2026-10-09), revisadas; no están en el manual */
  --zurai-borde: #E6E3DC;          /* borde decorativo de tarjetas sobre Paper */
  --zurai-cobalt-hover: #283FD1;   /* Cobalt + 20 % Ink; blanco encima 7,7:1 */
  --zurai-cobalt-claro: #788AFF;   /* Cobalt + 35 % blanco; enlaces sobre Ink 6,2:1 */
  --zurai-ink-2: #1C1D27;          /* superficie elevada en modo oscuro */
  --zurai-error: #B3123F;          /* carmesí, 31° de tono lejos de Signal; 6,2:1 sobre Paper */
  --zurai-exito: #17703F;          /* 5,6:1 sobre Paper */
  --zurai-aviso: #8A5A00;          /* 5,4:1 sobre Paper */
  --zurai-error-oscuro: #FF8095;   /* rosado, lejos de Signal; 8,0:1 sobre Ink */
  --zurai-exito-oscuro: #3DD68C;   /* 10,2:1 sobre Ink */
  --zurai-aviso-oscuro: #F5B544;   /* 10,5:1 sobre Ink */
  --zurai-borde-oscuro: #2E3040;   /* borde decorativo sobre Ink */
  /* Fondos de estado (avisos en línea): siempre con borde del color del estado + texto + ícono */
  --zurai-error-fondo: #F7E7EC;          /* error encima 5,7:1 */
  --zurai-exito-fondo: #E8F1EC;          /* éxito encima 5,3:1 */
  --zurai-aviso-fondo: #F3EEE6;          /* aviso encima 5,1:1 */
  --zurai-error-fondo-oscuro: #301F2B;   /* error-oscuro encima 6,5:1 */
  --zurai-exito-fondo-oscuro: #152B2A;
  --zurai-aviso-fondo-oscuro: #2E2620;

  /* (4) Roles semánticos: tema claro (por defecto) */
  --color-fondo: var(--zurai-paper);
  --color-superficie: var(--zurai-blanco);
  --color-texto: var(--zurai-ink);
  --color-texto-suave: var(--zurai-gris-500); /* 4,57:1: solo sobre fondo o superficie, nunca sobre beige ni borde */
  --color-borde: var(--zurai-borde);
  --color-borde-control: var(--zurai-gris-500); /* bordes de inputs: >= 3:1 */
  --color-accion: var(--zurai-cobalt);
  --color-accion-hover: var(--zurai-cobalt-hover);
  --color-accion-texto: var(--zurai-blanco);
  --color-enlace: var(--zurai-cobalt);
  --color-foco: var(--zurai-cobalt);
  --color-cursor: var(--zurai-signal);
  --color-error: var(--zurai-error);
  --color-exito: var(--zurai-exito);
  --color-aviso: var(--zurai-aviso);
  --color-error-fondo: var(--zurai-error-fondo);
  --color-exito-fondo: var(--zurai-exito-fondo);
  --color-aviso-fondo: var(--zurai-aviso-fondo);

  /* Tipografía */
  --fuente-sans: var(--font-sora, "Sora"), Arial, sans-serif;            /* --font-sora: next/font */
  --fuente-mono: var(--font-jetbrains-mono, "JetBrains Mono"), Consolas, monospace;
  --h1: 800 2.5rem/3rem var(--fuente-sans);        /* oficial 40/48 */
  --h2: 700 1.5rem/2rem var(--fuente-sans);        /* oficial 24/32 */
  --h3: 600 1.25rem/1.75rem var(--fuente-sans);    /* derivado */
  --cuerpo: 400 1rem/1.5rem var(--fuente-sans);    /* oficial 16/24 */
  --pequeno: 400 0.875rem/1.25rem var(--fuente-sans); /* derivado */
  --etiqueta: 500 0.75rem/1rem var(--fuente-mono); /* oficial 12/16, mayúsculas */
  --etiqueta-tracking: 0.167em;                    /* +2 a 12 px */
  --display: 800 clamp(2.5rem, 6vw, 4.5rem)/1.1 var(--fuente-sans); /* derivado: hero */

  /* Forma y espacio (derivados del estilo del manual) */
  --radio-tarjeta: 16px;
  --radio-control: 10px;
  --radio-pildora: 9999px;
  --radio-icono: 22.5%;
  --espacio: 4px; /* múltiplos: 8, 12, 16, 24, 32, 48, 64, 96 */
  --contenido-max: 72rem;

  /* Elevación y movimiento (derivados): sin sombras en piezas; una sola para capas flotantes */
  --sombra-flotante: 0 8px 24px rgb(14 15 26 / 0.12); /* menús, popovers, modales */
  --transicion: 150ms ease-out;                         /* hover y foco; nunca rebotes */

  /* Cursor (proporciones de la firma oficial con tagline) */
  --cursor-ancho: 0.6em;
  --cursor-alto: 0.16em;
  --cursor-separacion: 0.28em;
  --cursor-parpadeo: 1s;
  --cursor-ciclos: 5; /* WCAG 2.2.2: el parpadeo se detiene a los 5 s y el cursor queda fijo */

  color-scheme: light;
}

/* Tema oscuro: fondo Ink. Activar con data-tema="oscuro" en <html> o en un bloque.
 * Un bloque destacado (Ink) dentro de una página clara es lo mismo: data-tema="oscuro"
 * o la clase .zurai-tarjeta--destacada, así enlaces, foco y subtexto cambian con él. */
[data-tema="oscuro"], .zurai-tarjeta--destacada {
  --color-fondo: var(--zurai-ink);
  --color-superficie: var(--zurai-ink-2);
  --color-texto: var(--zurai-paper);
  --color-texto-suave: var(--zurai-gris-300);
  --color-borde: var(--zurai-borde-oscuro);
  --color-borde-control: var(--zurai-gris-300);
  --color-enlace: var(--zurai-cobalt-claro); /* Cobalt sobre Ink es 3,2:1: no sirve para texto */
  --color-foco: var(--zurai-cobalt-claro);
  --color-error: var(--zurai-error-oscuro);
  --color-exito: var(--zurai-exito-oscuro);
  --color-aviso: var(--zurai-aviso-oscuro);
  --color-error-fondo: var(--zurai-error-fondo-oscuro);
  --color-exito-fondo: var(--zurai-exito-fondo-oscuro);
  --color-aviso-fondo: var(--zurai-aviso-fondo-oscuro);
  /* Botón: sigue siendo Cobalt con texto blanco (5,9:1). Ponerlo sobre el fondo Ink,
   * no sobre superficies ink-2 (ahí el botón queda a 2,85:1 de su entorno). */
  color-scheme: dark;
}

/* ---------- Componentes base ----------
 * En @layer components: las utilidades de Tailwind y el CSS propio del proyecto
 * (sin capa) pueden ajustarlos sin pelear por especificidad. */
@layer components {

.zurai-cursor {
  display: inline-block;
  width: var(--cursor-ancho);
  height: var(--cursor-alto);
  margin-left: var(--cursor-separacion);
  background: var(--color-cursor);
  vertical-align: baseline;
  animation: zurai-parpadeo var(--cursor-parpadeo) steps(1, end) var(--cursor-ciclos);
}
@keyframes zurai-parpadeo { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zurai-cursor { animation: none; } }

.zurai-etiqueta {
  font: var(--etiqueta);
  letter-spacing: var(--etiqueta-tracking);
  text-transform: uppercase;
  color: var(--color-enlace);
}

.zurai-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px;
  font: 600 1rem/1 var(--fuente-sans);
  color: var(--color-accion-texto); background: var(--color-accion);
  border: 0; border-radius: var(--radio-pildora);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--transicion);
}
.zurai-boton:hover, .zurai-boton:active { background: var(--color-accion-hover); }
.zurai-boton[aria-busy="true"] { cursor: progress; } /* cargando: deshabilitar y cambiar el texto ("Enviando…") */
.zurai-boton--secundario { color: var(--color-texto); background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-texto); }
.zurai-boton--secundario:hover { background: color-mix(in srgb, var(--color-texto) 8%, transparent); }
.zurai-boton[disabled], .zurai-boton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 2px;
}

.zurai-tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  padding: 24px;
}
.zurai-tarjeta--destacada { background: var(--color-fondo); color: var(--color-texto); }

.zurai-campo { display: grid; gap: 6px; }
.zurai-campo label { font: 600 0.875rem/1.25rem var(--fuente-sans); color: var(--color-texto); }
.zurai-campo input, .zurai-campo select, .zurai-campo textarea {
  font: var(--cuerpo); color: var(--color-texto); background: var(--color-superficie);
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--color-borde-control); border-radius: var(--radio-control);
}
.zurai-campo [aria-invalid="true"] { border-color: var(--color-error); }
.zurai-campo .zurai-ayuda { font: var(--pequeno); color: var(--color-texto-suave); }
.zurai-campo .zurai-error { font: var(--pequeno); color: var(--color-error); }
.zurai-campo ::placeholder { color: var(--color-texto-suave); opacity: 1; }
.zurai-campo :disabled { opacity: .6; cursor: not-allowed; }

/* Aviso en línea: color + borde + texto (+ ícono). Nunca solo color. */
.zurai-aviso { padding: 12px 16px; border-radius: var(--radio-control); border: 1px solid; font: var(--pequeno); color: var(--color-texto); }
.zurai-aviso--error { background: var(--color-error-fondo); border-color: var(--color-error); }
.zurai-aviso--exito { background: var(--color-exito-fondo); border-color: var(--color-exito); }
.zurai-aviso--aviso { background: var(--color-aviso-fondo); border-color: var(--color-aviso); }

.zurai-flotante { box-shadow: var(--sombra-flotante); }
} /* fin @layer components */