/* ============================================================
   NOKTIR — Design Tokens v1.1
   "El que vela desde la noche."
   Un solo archivo para todos los proyectos: hub, TAXVO, Leads,
   calendario y lo que venga. Modo oscuro por defecto, modo claro
   por elección del usuario o del sistema.

   Uso:
     <html data-theme="dark">  → forzar oscuro
     <html data-theme="light"> → forzar claro
     (sin data-theme)          → sigue prefers-color-scheme,
                                 con oscuro como base.
   Toggle JS mínimo:
     document.documentElement.dataset.theme =
       document.documentElement.dataset.theme === 'light' ? 'dark' : 'light';
     localStorage.setItem('noktir-theme', document.documentElement.dataset.theme);
   Al cargar:
     const t = localStorage.getItem('noktir-theme');
     if (t) document.documentElement.dataset.theme = t;
   ============================================================ */

:root {
  /* ---- Paleta base (los seis tonos, nunca cambian) ---- */
  --nk-true-black: #1E1E21;
  --nk-black: #000000;
  --nk-white: #FFFFFF;
  --nk-non-white: #F4F4F4;
  --nk-light-gray: #C7C7C7;
  --nk-medium-gray: #8E8E90;
  --nk-dark-gray: #565659;

  /* ---- Tipografía ---- */
  --nk-font-display: "Alternate Gothic No2 D", "Arial Narrow", Arial, sans-serif;
  --nk-font-body: "Nimbus Sans Novus", Arial, Helvetica, sans-serif;
  --nk-tracking-display: 0.16em; /* wordmark y kickers */
  --nk-tracking-kicker: 0.28em;

  /* ---- Roles: MODO OSCURO (por defecto) ---- */
  --nk-bg: var(--nk-true-black);
  --nk-surface: #2A2A2E;            /* panel sobre fondo oscuro */
  --nk-surface-2: var(--nk-dark-gray);
  --nk-text: var(--nk-white);
  --nk-text-2: var(--nk-non-white);
  --nk-text-3: var(--nk-medium-gray);
  --nk-line: var(--nk-dark-gray);
  --nk-logo: var(--nk-white);       /* sigilo y wordmark */
  color-scheme: dark;
}

/* ---- MODO CLARO por preferencia de sistema (si no hay data-theme) ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --nk-bg: var(--nk-non-white);
    --nk-surface: var(--nk-white);
    --nk-surface-2: #E9E9EA;
    --nk-text: var(--nk-true-black);
    --nk-text-2: var(--nk-dark-gray);
    --nk-text-3: var(--nk-medium-gray);
    --nk-line: var(--nk-light-gray);
    --nk-logo: var(--nk-true-black);
    color-scheme: light;
  }
}

/* ---- MODO CLARO forzado ---- */
:root[data-theme="light"] {
  --nk-bg: var(--nk-non-white);
  --nk-surface: var(--nk-white);
  --nk-surface-2: #E9E9EA;
  --nk-text: var(--nk-true-black);
  --nk-text-2: var(--nk-dark-gray);
  --nk-text-3: var(--nk-medium-gray);
  --nk-line: var(--nk-light-gray);
  --nk-logo: var(--nk-true-black);
  color-scheme: light;
}

/* ---- MODO OSCURO forzado (explícito, por claridad) ---- */
:root[data-theme="dark"] {
  --nk-bg: var(--nk-true-black);
  --nk-surface: #2A2A2E;
  --nk-surface-2: var(--nk-dark-gray);
  --nk-text: var(--nk-white);
  --nk-text-2: var(--nk-non-white);
  --nk-text-3: var(--nk-medium-gray);
  --nk-line: var(--nk-dark-gray);
  --nk-logo: var(--nk-white);
  color-scheme: dark;
}

/* ============================================================
   Base mínima compartida
   ============================================================ */
body {
  background: var(--nk-bg);
  color: var(--nk-text);
  font-family: var(--nk-font-body);
  transition: background-color .25s ease, color .25s ease;
}

.nk-kicker {
  font-family: var(--nk-font-display);
  text-transform: uppercase;
  letter-spacing: var(--nk-tracking-kicker);
  color: var(--nk-text-3);
  font-size: .72rem;
}

.nk-h1 {
  font-family: var(--nk-font-body);
  font-weight: 300; /* Nimbus Light */
  color: var(--nk-text);
  letter-spacing: .01em;
}

.nk-wordmark {
  font-family: var(--nk-font-display);
  text-transform: uppercase;
  letter-spacing: var(--nk-tracking-display);
  color: var(--nk-logo);
}

.nk-panel {
  background: var(--nk-surface);
  border: 1px solid var(--nk-line);
}

hr, .nk-line { border: 0; border-top: 1px solid var(--nk-line); }

/* El sigilo en SVG inline: usar fill="currentColor" / stroke="currentColor"
   dentro de un contenedor con color: var(--nk-logo) y cambia solo de modo. */
.nk-sigil { color: var(--nk-logo); }

/* Regla de oro: NINGÚN color de acento en ningún modo.
   Verde/rojo solo en cifras financieras si el documento lo exige. */