/* ============================================================================
   CENTINEL MDM — Design Tokens (fuente única de verdad).
   Tema: "Visor Nocturno" — sala de control, base carbón azulado + acento
   cian-esmeralda. Se carga ANTES que cualquier otra hoja en todas las páginas.
   Cambiar la identidad = tocar SOLO este archivo (los nombres de token no cambian,
   así que ninguna página se rompe al reestilizar).
   ============================================================================ */

:root {
    /* ---- Fondos (carbón azulado, 6 niveles de profundidad) ---- */
    --bg-primary: #070b10;
    --bg-secondary: #0b1016;
    --bg-tertiary: #10171f;
    --bg-elevated: #16202b;
    --bg-hover: #1b2734;
    --bg-active: #21303f;

    /* ---- Acentos ---- */
    /* Firma: cian-esmeralda (monitoreo / "visión nocturna") */
    --accent-primary: #2dd4bf;
    --accent-primary-hover: #5eead4;
    --accent-primary-muted: rgba(45, 212, 191, 0.14);
    /* Secundario de apoyo: azul frío (enlaces, foco de datos) */
    --accent-secondary: #38bdf8;
    --accent-secondary-muted: rgba(56, 189, 248, 0.14);
    --accent-green: #3fb950;
    --accent-green-muted: rgba(63, 185, 80, 0.15);
    --accent-red: #f85149;
    --accent-red-muted: rgba(248, 81, 73, 0.15);
    --accent-yellow: #e3b341;
    --accent-yellow-muted: rgba(227, 179, 65, 0.15);
    --accent-purple: #a371f7;
    --accent-purple-muted: rgba(163, 113, 247, 0.15);
    --accent-cyan: #2dd4bf;
    --accent-cyan-muted: rgba(45, 212, 191, 0.15);

    /* ---- Texto (blancos ligeramente fríos) ---- */
    --text-primary: #e6f0f1;
    --text-secondary: #94a6b0;
    --text-tertiary: #6b7d89;
    --text-muted: #45535d;

    /* ---- Bordes ---- */
    --border-default: #21303c;
    --border-muted: #17222c;
    --border-accent: #2dd4bf;

    /* ---- Semáforo de estado (monitoreo "de un vistazo") ---- */
    --st-online: #2ea043;
    --st-online-bg: rgba(46, 160, 67, .14);
    --st-offline: #f85149;
    --st-offline-bg: rgba(248, 81, 73, .14);
    --st-alert: #e3b341;
    --st-alert-bg: rgba(227, 179, 65, .14);
    --st-pending: #a371f7;
    --st-pending-bg: rgba(163, 113, 247, .14);

    /* ---- Layout ---- */
    --header-height: 60px;
    --nav-w: 250px;          /* barra lateral expandida */
    --nav-w-min: 72px;       /* barra lateral colapsada (solo iconos) */
    --content-max: 1400px;   /* ancho máximo del contenido */

    /* ---- Elevación (superficies apiladas del tema oscuro) ---- */
    --surface-1: #0c131b;    /* panel base (sidebar, tarjetas) */
    --surface-2: #121b24;    /* tarjeta elevada */
    --surface-3: #18242f;    /* hover / activo */
    --ring: rgba(45, 212, 191, 0.38);       /* halo de foco */
    --shadow-xl: 0 18px 50px rgba(0, 0, 0, 0.6);

    /* ---- Gradientes de marca ---- */
    --grad-brand: linear-gradient(135deg, #5eead4 0%, #2dd4bf 45%, #14b8a6 100%);
    --grad-hero: radial-gradient(1200px 600px at 15% -10%, rgba(45, 212, 191, 0.16), transparent 60%),
                 radial-gradient(900px 500px at 100% 110%, rgba(56, 189, 248, 0.12), transparent 55%);
    --grad-online: linear-gradient(135deg, #2ea043, #3fb950);
    --grad-alert: linear-gradient(135deg, #b9860b, #e3b341);

    /* ---- Tipografía ---- */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

    /* ---- Sombras ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 0 22px rgba(45, 212, 191, 0.18);
    --glow-teal: 0 8px 26px rgba(45, 212, 191, 0.32);

    /* ---- Radios ---- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ---- Transiciones ---- */
    --transition-fast: 150ms ease;
    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}