/* =============================================================
   SLMConsole by SLM · Design tokens
   3 grupos semánticos:
     --nk-shell-*  → navbar oscura + chrome (modo dark, marca)
     --nk-page-*   → contenido principal (modo claro, surface estilo Stripe)
     --nk-purple-* → paleta morada de marca (cross-context)
   ============================================================= */

:root {
    /* ---------- SHELL (navbar morado oscuro sólido) ---------- */
    --nk-shell-bg:        #1c0e3d;       /* morado oscuro saturado */
    --nk-shell-bg-2:      #251451;       /* hover sobre la barra */
    --nk-shell-bg-3:      #2f1c66;       /* layer extra (menús) */
    --nk-shell-border:    #3a216f;
    --nk-shell-border-2:  #4d3186;
    --nk-shell-text:      #ffffff;
    --nk-shell-text-2:    #d8cdf0;
    --nk-shell-text-dim:  #9d8fc8;

    /* ---------- PAGE (contenido principal, claro estilo Stripe) ---------- */
    --nk-page-bg:         #fafbfc;       /* fondo del main */
    --nk-page-surface:    #ffffff;       /* cards */
    --nk-page-surface-2:  #f6f7f9;       /* inputs, chips, áreas sutiles */
    --nk-page-surface-3:  #eef0f3;       /* hover de chips/inputs */
    --nk-page-border:     #e6e8ee;       /* border default */
    --nk-page-border-2:   #d4d7df;       /* hover/focus border */
    --nk-page-text:       #15192a;       /* texto principal */
    --nk-page-text-2:     #4b5260;       /* texto secundario */
    --nk-page-text-dim:   #6b7280;       /* texto deprimido (sub) */
    --nk-page-shadow-sm:  0 1px 2px rgba(15,19,32,.04), 0 1px 3px rgba(15,19,32,.06);
    --nk-page-shadow:     0 4px 12px rgba(15,19,32,.06), 0 1px 3px rgba(15,19,32,.04);
    --nk-page-shadow-lg:  0 12px 28px rgba(15,19,32,.10), 0 2px 6px rgba(15,19,32,.04);

    /* ---------- PALETA MORADA (marca, vive en ambos contextos) ---------- */
    --nk-purple-1: #b896ff;              /* link/accent sobre dark */
    --nk-purple-2: #8b5cff;              /* primary CTA */
    --nk-purple-3: #6e3eff;
    --nk-purple-4: #4f23d6;              /* hover CTA */
    --nk-purple-soft:  rgba(139,92,255,.08);   /* bg sutil sobre claro */
    --nk-purple-ring:  rgba(139,92,255,.18);   /* focus halo */

    /* ---------- STATES (calibrados para legibilidad sobre claro) ---------- */
    --nk-success:      #16a34a;
    --nk-success-soft: rgba(22,163,74,.10);
    --nk-warn:         #d97706;
    --nk-warn-soft:    rgba(217,119,6,.10);
    --nk-error:        #dc2626;
    --nk-error-soft:   rgba(220,38,38,.10);

    /* ---------- GEOMETRÍA + TIPOGRAFÍA ---------- */
    --nk-radius:    14px;
    --nk-radius-sm: 10px;
    --nk-radius-xs: 6px;

    --nk-font:      "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --nk-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --nk-topbar-h:  60px;

    /* ---------- LEGACY ALIASES (compat con código antiguo) ----------
       Apuntan a los tokens nuevos para no romper views que aún no se
       refactorizaron. Quitar cuando esté todo migrado. */
    --nk-bg-0:       var(--nk-page-bg);
    --nk-bg-1:       var(--nk-page-surface);
    --nk-bg-2:       var(--nk-page-surface-2);
    --nk-bg-3:       var(--nk-page-surface-3);
    --nk-border:     var(--nk-page-border);
    --nk-border-2:   var(--nk-page-border-2);
    --nk-text:       var(--nk-page-text);
    --nk-text-2:     var(--nk-page-text-2);
    --nk-text-dim:   var(--nk-page-text-dim);
    --nk-shadow-sm:  var(--nk-page-shadow-sm);
    --nk-shadow:     var(--nk-page-shadow-lg);
    --nk-shadow-pp:  0 8px 24px rgba(110,62,255,.22);
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    background: var(--nk-page-bg);
    color: var(--nk-page-text);
    font-family: var(--nk-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
a       { color: var(--nk-purple-3); text-decoration: none; }
a:hover { color: var(--nk-purple-4); }
::selection { background: var(--nk-purple-soft); color: var(--nk-purple-4); }