/* ==============================================================================
   INNOVAPP 2026 - SISTEMA DE TOKENS SEMÁNTICOS UNIVERSALES
   Ubicación: nucleo/estilos_tokens.css
   Directriz: doc-/0, doc-/3 y doc-/12 (Minimalismo Silencioso & Rigor Institucional)
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* --- Tokens Universales por Función: Modo Claro Corporativo (Por Defecto) --- */
:root,
[data-tema="claro"] {
  /* Fondos y Superficies (Slate Corporativo) */
  --color-fondo-base: #f8fafc;
  --color-fondo-canvas: #ffffff;
  --color-superficie: #ffffff;
  --color-superficie-elevada: #f1f5f9;
  --color-superficie-hover: #e2e8f0;

  /* Bordes Nítidos */
  --color-borde-sutil: #e2e8f0;
  --color-borde-firme: #cbd5e1;
  --color-borde-enfocado: #1d4ed8;

  /* Paleta de Autoridad & Acciones */
  --color-autoridad-marino: #0b1b3d;
  --color-primario-cobalto: #1d4ed8;
  --color-primario-hover: #2563eb;
  --color-primario-activo: #1e40af;

  /* Acentos de Validación y Estado */
  --color-exito-esmeralda: #059669;
  --color-exito-fondo: rgba(5, 150, 105, 0.12);
  --color-exito-borde: rgba(5, 150, 105, 0.35);

  --color-alerta-ambar: #d97706;
  --color-alerta-fondo: rgba(217, 119, 6, 0.12);
  --color-alerta-borde: rgba(217, 119, 6, 0.35);

  --color-peligro-rubi: #dc2626;
  --color-peligro-fondo: rgba(220, 38, 38, 0.12);
  --color-peligro-borde: rgba(220, 38, 38, 0.35);

  /* Tipografía y Escalas de Texto */
  --color-texto-titular: #0f172a;
  --color-texto-cuerpo: #334155;
  --color-texto-atenuado: #64748b;
  --color-texto-desactivado: #94a3b8;
  --color-texto-principal: var(--color-texto-titular);
  --color-texto-secundario: var(--color-texto-atenuado);

  /* Sombras de Elevación */
  --sombra-sutil: 0 1px 3px rgba(15, 23, 42, 0.08);
  --sombra-elevada: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);

  /* Familias Tipográficas */
  --fuente-titulos: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fuente-cuerpo: 'Inter', system-ui, -apple-system, sans-serif;
  --fuente-tecnica: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Geometría y Ergonomía Mobile-First */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 14px;
  --altura-tactil-minima: 48px;
}

/* --- Tokens Universales: Modo Oscuro (Cobalto Profundo) --- */
[data-tema="oscuro"] {
  --color-fondo-base: #090d16;
  --color-fondo-canvas: #0f172a;
  --color-superficie: #141e33;
  --color-superficie-elevada: #1a2742;
  --color-superficie-hover: #223254;

  --color-borde-sutil: rgba(255, 255, 255, 0.08);
  --color-borde-firme: rgba(255, 255, 255, 0.16);
  --color-borde-enfocado: #2563eb;

  --color-autoridad-marino: #0b1b3d;
  --color-primario-cobalto: #1d4ed8;
  --color-primario-hover: #2563eb;
  --color-primario-activo: #1e40af;

  --color-texto-titular: #f8fafc;
  --color-texto-cuerpo: #cbd5e1;
  --color-texto-atenuado: #94a3b8;
  --color-texto-desactivado: #64748b;
  --color-texto-principal: var(--color-texto-titular);
  --color-texto-secundario: var(--color-texto-atenuado);

  --sombra-sutil: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --sombra-elevada: 0 8px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.25);
}

/* Compatibilidad Retroactiva Suave para Variables Antiguas (Transición Asistida) */
:root {
  --fondo-principal: var(--color-fondo-base);
  --fondo-tarjeta: var(--color-superficie);
  --fondo-tarjeta-hover: var(--color-superficie-hover);
  --borde-cristal: var(--color-borde-sutil);
  --borde-activo: var(--color-borde-enfocado);
  --azul-profundo: var(--color-autoridad-marino);
  --azul-electrico: var(--color-primario-cobalto);
  --verde-esmeralda: var(--color-exito-esmeralda);
  --ambar-energia: var(--color-alerta-ambar);
  --rojo-alerta: var(--color-peligro-rubi);
  --texto-principal: var(--color-texto-titular);
  --texto-secundario: var(--color-texto-cuerpo);
  --texto-atenuado: var(--color-texto-atenuado);
  --sombra-tarjeta: var(--sombra-elevada);
}