/* ============================================================================
   ATLAS Design Tokens — capa 0 del sistema de estilos.
   Plan: API/docs/plans/2026-07-17-design-tokens-unification.md

   Reglas:
   - Componentes y páginas consumen SOLO tokens semánticos (§2).
   - Los primitivos (§1) solo se referencian desde este fichero.
   - Si falta un token, se añade aquí (semántico primero); nunca se hardcodea
     un valor nuevo en un componente.
   - Los valores primitivos son la escala default de Tailwind, que es la paleta
     que el CSS existente ya usaba de facto (ver tmp/style-inventory.md).
   ========================================================================= */

:root {
	/* ==== 1. PRIMITIVOS ================================================== */

	/* Tipografía */
	--atlas-font-sans: 'Inter', 'Segoe UI', sans-serif;
	--atlas-font-display: 'Outfit', 'Inter', sans-serif;
	--atlas-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Neutros */
	--atlas-white: #ffffff;
	--atlas-black: #000000;

	--atlas-gray-50: #f9fafb;
	--atlas-gray-100: #f3f4f6;
	--atlas-gray-200: #e5e7eb;
	--atlas-gray-300: #d1d5db;
	--atlas-gray-400: #9ca3af;
	--atlas-gray-500: #6b7280;
	--atlas-gray-600: #4b5563;
	--atlas-gray-700: #374151;
	--atlas-gray-800: #1f2937;
	--atlas-gray-900: #111827;

	--atlas-slate-50: #f8fafc;
	--atlas-slate-100: #f1f5f9;
	--atlas-slate-200: #e2e8f0;
	--atlas-slate-300: #cbd5e1;
	--atlas-slate-400: #94a3b8;
	--atlas-slate-500: #64748b;

	/* Azules (primario) */
	--atlas-blue-50: #eff6ff;
	--atlas-blue-100: #dbeafe;
	--atlas-blue-500: #3b82f6;
	--atlas-blue-600: #2563eb;
	--atlas-blue-700: #1d4ed8;
	--atlas-blue-800: #1e40af;

	--atlas-indigo-50: #eef2ff;
	--atlas-indigo-100: #e0e7ff;
	--atlas-indigo-200: #c7d2fe;
	--atlas-indigo-500: #6366f1;
	--atlas-indigo-800: #3730a3;
	--atlas-violet-600: #7c3aed;

	/* Verdes */
	--atlas-emerald-50: #ecfdf5;
	--atlas-emerald-100: #d1fae5;
	--atlas-emerald-500: #10b981;
	--atlas-emerald-600: #059669;
	--atlas-emerald-800: #065f46;
	--atlas-green-600: #16a34a;

	/* Rojos */
	--atlas-red-50: #fef2f2;
	--atlas-red-100: #fee2e2;
	--atlas-red-500: #ef4444;
	--atlas-red-600: #dc2626;
	--atlas-red-700: #b91c1c;
	--atlas-red-800: #991b1b;

	/* Ámbar / amarillo / naranja */
	--atlas-amber-50: #fffbeb;
	--atlas-amber-100: #fef3c7;
	--atlas-amber-500: #f59e0b;
	--atlas-amber-700: #b45309;
	--atlas-amber-800: #92400e;
	--atlas-yellow-400: #facc15;
	--atlas-yellow-700: #a16207;
	--atlas-yellow-800: #854d0e;
	--atlas-orange-50: #fff7ed;
	--atlas-orange-100: #ffedd5;
	--atlas-orange-500: #f97316;
	--atlas-orange-800: #9a3412;

	/* Primitivos del tema dashboards (Technification / AtlasNetwork / QatarPM) */
	--atlas-cyan: #00e5ff;
	--atlas-cyan-soft: #aef2ff;
	--atlas-cyan-muted: #7fd7e8;
	--atlas-navy-950: #02050a;
	--atlas-navy-900: #07131f;
	--atlas-mist-100: #eaf6fa;
	--atlas-mist-300: #c2d4dc;
	--atlas-mist-400: #9fc7d4;
	--atlas-mist-500: #8ba6b1;
	--atlas-mist-600: #6f8a95;
	--atlas-dash-green: #25d07d;
	--atlas-dash-amber: #ffb020;
	--atlas-dash-red: #ff4d6d;

	/* ==== 2. SEMÁNTICOS ================================================== */

	/* Marca / acciones */
	--atlas-color-primary: var(--atlas-blue-600);
	--atlas-color-primary-hover: var(--atlas-blue-700);
	--atlas-color-primary-strong: var(--atlas-blue-800);
	--atlas-color-primary-soft: color-mix(in srgb, var(--atlas-color-primary) 10%, transparent);
	--atlas-color-accent: var(--atlas-indigo-500);

	/* Superficies */
	--atlas-surface: var(--atlas-white);
	--atlas-surface-muted: var(--atlas-gray-50);
	--atlas-surface-sunken: var(--atlas-gray-100);
	--atlas-overlay: rgba(0, 0, 0, 0.5);

	/* Texto */
	--atlas-text: var(--atlas-gray-900);
	--atlas-text-secondary: var(--atlas-gray-700);
	--atlas-text-muted: var(--atlas-gray-500);
	--atlas-text-faint: var(--atlas-gray-400);
	--atlas-text-on-primary: var(--atlas-white);

	/* Bordes */
	--atlas-border: var(--atlas-gray-200);
	--atlas-border-strong: var(--atlas-gray-300);
	--atlas-border-focus: var(--atlas-blue-500);

	/* Severidad — triple bg (fondo suave) / base (icono, chip) / text (texto
	   sobre bg suave). Es el patrón real de badges/chips/banners existentes. */
	--atlas-sev-ok: var(--atlas-emerald-500);
	--atlas-sev-ok-bg: var(--atlas-emerald-100);
	--atlas-sev-ok-text: var(--atlas-emerald-800);
	--atlas-sev-warn: var(--atlas-amber-500);
	--atlas-sev-warn-bg: var(--atlas-amber-100);
	--atlas-sev-warn-text: var(--atlas-amber-800);
	--atlas-sev-danger: var(--atlas-red-500);
	--atlas-sev-danger-bg: var(--atlas-red-100);
	--atlas-sev-danger-text: var(--atlas-red-800);
	--atlas-sev-info: var(--atlas-blue-500);
	--atlas-sev-info-bg: var(--atlas-blue-100);
	--atlas-sev-info-text: var(--atlas-blue-800);
	--atlas-sev-pending: var(--atlas-orange-500);
	--atlas-sev-pending-bg: var(--atlas-orange-100);
	--atlas-sev-pending-text: var(--atlas-orange-800);

	/* Radio — escala derivada de frecuencia real (12/10/8/6/4 + pill/círculo) */
	--atlas-radius-xs: 4px;
	--atlas-radius-sm: 6px;
	--atlas-radius-md: 8px;
	--atlas-radius-lg: 10px;
	--atlas-radius-xl: 12px;
	--atlas-radius-2xl: 16px;
	--atlas-radius-full: 999px;

	/* Sombras — 1 card por defecto, 2 elevación media, 3 popover/modal */
	--atlas-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);
	--atlas-shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--atlas-shadow-3: 0 4px 14px rgba(0, 0, 0, 0.12);

	/* Espaciado (base 4px) */
	--atlas-space-1: 4px;
	--atlas-space-2: 8px;
	--atlas-space-3: 12px;
	--atlas-space-4: 16px;
	--atlas-space-5: 20px;
	--atlas-space-6: 24px;
	--atlas-space-8: 32px;
	--atlas-space-10: 40px;

	/* Z-index — alineado con los rangos ya usados (1020 sticky, 1080 modal) */
	--atlas-z-dropdown: 1000;
	--atlas-z-sticky: 1020;
	--atlas-z-modal: 1080;
	--atlas-z-toast: 1100;
	--atlas-z-max: 9999;

	/* ==== HSE DOMAIN PALETTE =============================================
	   Mockup tokens (hse-spec §0.2) mapped onto ATLAS. Semantic — consumed by
	   css/pages/hse/* and read at runtime (getComputedStyle) by the HSE ECharts
	   wrappers (wwwroot/js/hse/hseCharts.js). Never hardcode these hexes in a
	   page/component; consume the token. Teal accent + purple have no Tailwind
	   primitive, so they are defined here as the single source of truth. */
	--atlas-hse-navy: #0b2545;          /* headings, primary numbers */
	--atlas-hse-brand: var(--atlas-color-primary);
	--atlas-hse-accent: #2e86ab;        /* links, rings, "Restricted Area Access" */
	--atlas-hse-ok: var(--atlas-emerald-600);
	--atlas-hse-ok-soft: var(--atlas-emerald-50);
	--atlas-hse-warn: var(--atlas-amber-700);
	--atlas-hse-warn-soft: var(--atlas-amber-50);
	--atlas-hse-no: var(--atlas-red-600);
	--atlas-hse-no-soft: var(--atlas-red-50);
	--atlas-hse-purple: #7a4fa3;        /* Smart Monitoring / Prevention Intelligence / mobile */
	--atlas-hse-purple-soft: #efe7f5;
	--atlas-hse-incident-red: #c0392b;  /* Incident "Reporting & Classification" phase */
	--atlas-hse-muted: var(--atlas-text-muted);
	--atlas-hse-line: var(--atlas-border);
	--atlas-hse-bg: var(--atlas-gray-100);
}

/* ==== 3. TEMA DASHBOARDS ================================================
   Aplicar .theme-technification en el contenedor raíz del dashboard re-mapea
   los semánticos al look oscuro/cian. Los componentes no cambian: siguen
   consumiendo los mismos tokens semánticos. */
.theme-technification {
	--atlas-color-primary: var(--atlas-cyan);
	--atlas-color-primary-hover: var(--atlas-cyan-soft);
	--atlas-color-primary-strong: var(--atlas-cyan-muted);
	--atlas-color-primary-soft: color-mix(in srgb, var(--atlas-cyan) 12%, transparent);
	--atlas-color-accent: var(--atlas-cyan);

	--atlas-surface: var(--atlas-navy-900);
	--atlas-surface-muted: var(--atlas-navy-950);
	--atlas-surface-sunken: var(--atlas-navy-950);
	--atlas-overlay: rgba(0, 0, 0, 0.65);

	--atlas-text: var(--atlas-mist-100);
	--atlas-text-secondary: var(--atlas-mist-300);
	--atlas-text-muted: var(--atlas-mist-500);
	--atlas-text-faint: var(--atlas-mist-600);
	--atlas-text-on-primary: var(--atlas-navy-950);

	--atlas-border: color-mix(in srgb, var(--atlas-cyan) 18%, transparent);
	--atlas-border-strong: color-mix(in srgb, var(--atlas-cyan) 30%, transparent);
	--atlas-border-focus: var(--atlas-cyan);

	--atlas-sev-ok: var(--atlas-dash-green);
	--atlas-sev-ok-bg: color-mix(in srgb, var(--atlas-dash-green) 15%, transparent);
	--atlas-sev-ok-text: var(--atlas-dash-green);
	--atlas-sev-warn: var(--atlas-dash-amber);
	--atlas-sev-warn-bg: color-mix(in srgb, var(--atlas-dash-amber) 15%, transparent);
	--atlas-sev-warn-text: var(--atlas-dash-amber);
	--atlas-sev-danger: var(--atlas-dash-red);
	--atlas-sev-danger-bg: color-mix(in srgb, var(--atlas-dash-red) 15%, transparent);
	--atlas-sev-danger-text: var(--atlas-dash-red);
	--atlas-sev-info: var(--atlas-cyan);
	--atlas-sev-info-bg: color-mix(in srgb, var(--atlas-cyan) 15%, transparent);
	--atlas-sev-info-text: var(--atlas-cyan-soft);
}