/* ============================================================================
   NexaCore — Tokens
   ----------------------------------------------------------------------------
   Autoridad: nexacore-design-system.html (constante TOKEN_CSS).
   Las rampas de marca (signal-*, ink-*) son fieles al sistema y NO cambian
   con el tema: son la identidad.

   Sobre ellas viven los TOKENS SEMÁNTICOS de superficie y texto, que sí
   cambian. Los componentes usan solo los semánticos; así una misma regla
   sirve en claro y en oscuro.

   MODO CLARO — extensión deliberada del sistema
   `nexacoredesign.md` declara «Dark mode ONLY» y el sistema vinculante no
   trae paleta clara. El usuario pidió las dos versiones el 2026-09-02, así
   que aquí se extiende. La paleta clara no se inventó: arranca de las dos
   reglas on-light que el propio sistema ya declaraba —texto `ink-950` y
   acento `signal-700`— y de ahí se derivan las superficies.

   Tres estados de tema:
     :root                                   -> claro (base)
     @media (prefers-color-scheme: dark)     -> oscuro, salvo elección clara
     :root[data-theme="dark"|"light"]        -> elección explícita, gana siempre

   Orden de carga:
     1. nexacore-tokens.css   <- este archivo
     2. nexacore.css
     3. nexacore-site.css

   Fuentes (una sola petición, las tres familias del sistema):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   ========================================================================== */

:root {

  /* ==========================================================================
     RAMPAS DE MARCA — idénticas al sistema, iguales en ambos temas
     ========================================================================== */

  /* Signal — cian de marca */
  --signal-50:  #E5F8FF;
  --signal-100: #C2EFFF;
  --signal-200: #8AE2FF;
  --signal-300: #4DD2FF;
  --signal-400: #00BAFF;
  --signal-500: #009FE0;
  --signal-600: #0082BC;
  --signal-700: #006C99;
  --signal-800: #005478;
  --signal-900: #003D57;
  --signal-on-light: var(--signal-700);

  /* Ink — rampa de superficies */
  --ink-1000: #000000;
  --ink-950:  #03060F;
  --ink-900:  #060B1C;
  --ink-850:  #0A1230;
  --ink-800:  #0E1A42;
  --ink-700:  #16295C;
  --ink-600:  #1F3A78;

  /* ==========================================================================
     TIPOGRAFÍA, ESPACIO, FORMA Y MOVIMIENTO — sin tema
     ========================================================================== */

  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-text:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, monospace;

  /* Escala tipográfica — razón 1.25 */
  --size-3xs: 11px;
  --size-2xs: 12px;
  --size-xs:  13px;
  --size-sm:  15px;
  --size-md:  17px;
  --size-lg:  21px;
  --size-xl:  26px;
  --size-2xl: 33px;
  --size-3xl: 41px;
  --size-4xl: 51px;
  --size-5xl: 64px;

  /* Espaciado — base 4 */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Radio */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 999px;

  /* Movimiento */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;

  /* ==========================================================================
     SEMÁNTICOS — TEMA CLARO (base)
     Superficies con sesgo frío hacia el navy de marca. Nunca gris neutro.
     ========================================================================== */

  color-scheme: light;

  --surface-page:   #F4F7FC;  /* fondo de la página            */
  --surface:        #FFFFFF;  /* panel, tarjeta, pie           */
  --surface-raised: #EFF4FB;  /* cabecera de panel, realce     */
  --surface-inset:  #E5ECF6;  /* canal, riel, fondo hundido    */
  --surface-track:  #CBD6E8;  /* pulgar de scroll, pista       */
  --surface-deep:   #FFFFFF;  /* campo de formulario           */
  --on-accent:      #FFFFFF;  /* texto sobre el acento sólido  */

  --signal:      var(--signal-700);
  --signal-soft: var(--signal-800);   /* estado hover del acento */

  --text-primary:   #060B1C;
  --text-secondary: #39435C;
  --text-tertiary:  #586479;
  --text-muted:     #5E6A80;

  --status-online:   #0E7A4F;
  --status-degraded: #8A5A00;
  --status-fault:    #C0293F;

  --line-subtle: rgba(6, 11, 28, .10);
  --line:        rgba(6, 11, 28, .16);
  --line-strong: rgba(6, 11, 28, .28);

  /* Tintes: lavados translúcidos de estado y acento */
  --tint-signal:        rgba(0, 108, 153, .05);
  --tint-signal-strong: rgba(0, 108, 153, .09);
  --tint-signal-ring:   rgba(0, 108, 153, .18);
  --tint-neutral:       rgba(6, 11, 28, .05);
  --tint-online:        rgba(14, 122, 79, .10);
  --tint-degraded:      rgba(138, 90, 0, .10);
  --tint-fault:         rgba(192, 41, 63, .10);
  --tint-idle:          rgba(88, 100, 121, .10);

  /* Velo sobre imagen, para que el texto encima siempre se lea.
     Tres paradas del mismo color: un `transparent` literal interpola por
     negro en algunos motores y deja una banda gris. */
  --scrim-100: #FFFFFF;
  --scrim-45:  rgba(255, 255, 255, .55);
  --scrim-0:   rgba(255, 255, 255, 0);
  --overlay:   rgba(6, 11, 28, .55);
  --img-opacity: .92;

  /* Fondo exterior: el lienzo del sitio flota encima. */
  --ground: #D9E2F0;
}

/* ============================================================================
   SEMÁNTICOS — TEMA OSCURO
   Estos son los valores del sistema vinculante, tal cual.
   El guard :not([data-theme="light"]) deja que una elección explícita de
   claro gane sobre un sistema operativo en oscuro.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface-page:   var(--ink-950);
    --surface:        var(--ink-900);
    --surface-raised: var(--ink-850);
    --surface-inset:  var(--ink-800);
    --surface-track:  var(--ink-700);
    --surface-deep:   var(--ink-1000);
    --on-accent:      var(--ink-1000);

    --signal:      var(--signal-400);
    --signal-soft: var(--signal-300);

    --text-primary:   #FFFFFF;
    --text-secondary: #C7D2E4;
    --text-tertiary:  #9AA7BE;
    --text-muted:     #7A8AA3;

    --status-online:   #3DDC97;
    --status-degraded: #FFC53D;
    --status-fault:    #FF6B81;

    --line-subtle: rgba(199, 210, 228, .10);
    --line:        rgba(199, 210, 228, .18);
    --line-strong: rgba(199, 210, 228, .30);

    --tint-signal:        rgba(0, 186, 255, .05);
    --tint-signal-strong: rgba(0, 186, 255, .10);
    --tint-signal-ring:   rgba(0, 186, 255, .16);
    --tint-neutral:       rgba(199, 210, 228, .07);
    --tint-online:        rgba(61, 220, 151, .12);
    --tint-degraded:      rgba(255, 197, 61, .12);
    --tint-fault:         rgba(255, 107, 129, .14);
    --tint-idle:          rgba(154, 167, 190, .10);

    --scrim-100: var(--ink-950);
    --scrim-45:  rgba(3, 6, 15, .45);
    --scrim-0:   rgba(3, 6, 15, 0);
    --overlay:   rgba(3, 6, 15, .88);
    --img-opacity: .5;

    --ground: #000000;
  }
}

/* La misma definición, para cuando el visitante elige oscuro a mano. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:   var(--ink-950);
  --surface:        var(--ink-900);
  --surface-raised: var(--ink-850);
  --surface-inset:  var(--ink-800);
  --surface-track:  var(--ink-700);
  --surface-deep:   var(--ink-1000);
  --on-accent:      var(--ink-1000);

  --signal:      var(--signal-400);
  --signal-soft: var(--signal-300);

  --text-primary:   #FFFFFF;
  --text-secondary: #C7D2E4;
  --text-tertiary:  #9AA7BE;
  --text-muted:     #7A8AA3;

  --status-online:   #3DDC97;
  --status-degraded: #FFC53D;
  --status-fault:    #FF6B81;

  --line-subtle: rgba(199, 210, 228, .10);
  --line:        rgba(199, 210, 228, .18);
  --line-strong: rgba(199, 210, 228, .30);

  --tint-signal:        rgba(0, 186, 255, .05);
  --tint-signal-strong: rgba(0, 186, 255, .10);
  --tint-signal-ring:   rgba(0, 186, 255, .16);
  --tint-neutral:       rgba(199, 210, 228, .07);
  --tint-online:        rgba(61, 220, 151, .12);
  --tint-degraded:      rgba(255, 197, 61, .12);
  --tint-fault:         rgba(255, 107, 129, .14);
  --tint-idle:          rgba(154, 167, 190, .10);

  --scrim-100: var(--ink-950);
  --scrim-45:  rgba(3, 6, 15, .45);
  --scrim-0:   rgba(3, 6, 15, 0);
  --overlay:   rgba(3, 6, 15, .88);
  --img-opacity: .5;

  --ground: #000000;
}

/* ============================================================================
   CONTRASTE — medido, no declarado
   ----------------------------------------------------------------------------
   Todo el cuerpo del sistema (15px y menores) es texto normal para WCAG:
   exige 4.5:1. `.impeccable/verify-design-system.py` vuelve a medirlo.

   OSCURO   sobre ink-950 / 900 / 850 / 800 / 700
     text-primary    20.25 · 19.58 · 18.39 · 16.87 · 13.95
     text-secondary  13.28 · 12.84 · 12.05 · 11.06 ·  9.14
     text-tertiary    8.34 ·  8.06 ·  7.57 ·  6.94 ·  5.74
     text-muted       5.78 ·  5.59 ·  5.25 ·  4.81 ·  3.98  <-- reprueba
     signal 400       9.13 ·  8.83 ·  8.29 ·  7.60 ·  6.29

   CLARO    sobre page / surface / raised / inset
     text-primary    18.38 · 19.58 · 17.55 · 16.09
     text-secondary   9.25 ·  9.85 ·  8.83 ·  8.09
     text-tertiary    5.61 ·  5.98 ·  5.36 ·  4.91
     text-muted       5.10 ·  5.43 ·  4.87 ·  4.46  <-- reprueba en inset
     signal 700       5.47 ·  5.83 ·  5.22 ·  4.79

   PROHIBIDO PARA TEXTO DE CUERPO:
     oscuro: --text-muted sobre --ink-700 y --ink-600
     claro:  --text-muted sobre --surface-inset
   En esas superficies el escalón mínimo es --text-tertiary.
   ========================================================================== */

/* ============================================================================
   LOGOTIPO
   ========================================================================== */

.nexacore-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variation-settings: 'opsz' 18;
  color: var(--text-primary);
}

.nexacore-wordmark .core { color: var(--signal); }

/* ============================================================================
   FOCO VISIBLE — en todo el sistema
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   SUPERFICIE CÁLIDA — añadido para la composición editorial
   ----------------------------------------------------------------------------
   El sistema tiene sesgo frío hacia el navy de marca y así se queda. Esto no lo
   corrige: agrega UN rol nuevo, un neutro apenas templado, para el respaldo de
   las celdas de imagen y la banda de cierre. Da el aire de la referencia sin
   mover el suelo de la página ni el cyan.
   ========================================================================== */

:root {
  --surface-warm: #F2EFE9;
  --line-warm: rgba(102, 88, 66, .14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-warm: #12121A;
    --line-warm: rgba(226, 214, 194, .10);
  }
}

:root[data-theme="dark"] {
  --surface-warm: #12121A;
  --line-warm: rgba(226, 214, 194, .10);
}