/*
 * Design tokens de Appulso: la única fuente de colores para la web y la app
 * (CLAUDE.md). Contrastes comprobados en design/README.md (WCAG 2.2 AA).
 *
 * --brand-*: la paleta de marca tal cual, para logotipos e ilustraciones.
 *   No son colores de texto: el cian, por ejemplo, no llega a 4,5:1 sobre blanco.
 * El resto son colores con función (fondo, texto, enlace...), con valor
 * distinto en modo claro y oscuro.
 */
:root {
  --brand-navy: #101828;
  --brand-cyan: #06B6D4;
  --brand-slate: #64748B;
  --brand-blue: #3B82F6;

  --color-bg: #F8FAFC;
  --color-fg: #101828;
  --color-muted: #475569;
  --color-accent: #2563EB;   /* enlaces, botones, foco */
  --color-pulse: #0E7490;    /* cian legible como texto o icono */
  --color-surface: #FFFFFF;  /* tarjetas y paneles sobre el fondo */
  --color-border: #E2E8F0;   /* decorativo: no separa nada imprescindible */

  /* Consola de ejemplo: siempre oscura, en los dos modos. */
  --console-bg: #0B1220;
  --console-fg: #E2E8F0;
  --console-muted: #94A3B8;
  --console-line: #1E293B;   /* decorativo */
  --console-ok: #34D399;
  --console-warn: #FBBF24;
  --console-down: #F87171;

  /* Espaciado: una unidad base; la app (Tailwind) la multiplica (p-4 = 4 unidades). */
  --space-unit: 0.25rem;

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Estados en la app (texto sobre --color-bg y --color-surface, AA). */
  --color-danger: #B91C1C;
  --color-ok: #047857;
  --color-warn: #A16207;
  --color-qr: #FFFFFF;       /* fondo del código QR de la 2FA, igual en los dos modos */

  /* Tipografía: design/fonts/fonts.css */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #101828;
    --color-fg: #F1F5F9;
    --color-muted: #94A3B8;
    --color-accent: #60A5FA;
    --color-pulse: #06B6D4;
    --color-surface: #172033;
    --color-border: #263248;
    --color-danger: #F87171;
    --color-ok: #34D399;
    --color-warn: #FBBF24;
  }
}