/* nocturne/tokens.css — CONTRATO DE COLOR COMPARTIDO de dev.tracehold.com (2026-11).
   Fuente única de la paleta para la portada (Landing Hybrid, sistema «Nocturne») y para las subpáginas (site3).
   · OSCURO (por defecto): valores exactos de landing-app/_ds/nocturne-…/styles.css (la portada aprobada en la reunión).
   · CLARO: el par del mismo sistema — mismo matiz (blurple OKLCH ~289) y misma marca #7B38FF; rampas INVERTIDAS para que
     «neutral-300 = texto secundario» y «accent-300 = enlace» sigan funcionando sin tocar el marcado.
   Selección: html[data-theme="light"] | html[data-theme="dark"] (lo fija /assets/site-ds/theme-init.js; sin JS = oscuro).
   Tokens nuevos (--th-*) para lo que la portada tenía en literales: marca, texto sobre marca, sombras de tarjeta, fondo de cabecera. */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-2: #a7a1db;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, .65);

  --th-brand: #7B38FF;            /* violeta de marca (banda «How», barra de progreso, spine) */
  --th-brand-2: #9159FF;
  --th-on-brand: #ffffff;
  --th-ink: #0f1019;              /* texto oscuro fijo (sobre superficies claras dentro de demos) */
  --th-header-bg: color-mix(in srgb, var(--color-bg) 82%, transparent);
  --th-overlay: rgba(0, 0, 0, .55);
  --th-grid-dot: rgba(255, 255, 255, .06);

  /* — portada: tokens añadidos 2026-11 (semánticos de estado, banda de marca, sombras). Oscuro = valores literales de la portada. — */
  --th-hero-dot: color-mix(in srgb, #9397ab 26%, transparent);   /* retícula de puntos del héroe */
  --th-pop-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);          /* menús desplegables de la cabecera */
  --th-ok: oklch(0.78 0.13 155);                                  /* verde: texto/icono/trazo sobre superficie */
  --th-warn: oklch(0.80 0.12 70);                                 /* ámbar */
  --th-err: oklch(0.72 0.14 22);                                  /* rojo */
  --th-err-a: oklch(0.76 0.14 22);                                /* rojo: contadores */
  --th-err-b: oklch(0.82 0.1 22);                                 /* rojo: etiquetas */
  --th-err-x: oklch(0.62 0.12 22);                                /* rojo: icono «no» de la tabla */
  --th-ok-bg: oklch(0.32 0.06 155);   --th-ok-fg: oklch(0.84 0.12 155);
  --th-warn-bg: oklch(0.35 0.07 70);  --th-warn-fg: oklch(0.88 0.1 75);
  --th-err-bg: oklch(0.35 0.08 22);   --th-err-fg: oklch(0.86 0.09 22);
  --th-chip-bg: oklch(0.38 0.08 70);  --th-chip-fg: oklch(0.9 0.1 75);   /* marcador [iban] redactado */
  --th-hit-bg: oklch(0.35 0.08 22);                               /* hallazgo resaltado en un texto */
  --th-ok-fill: oklch(0.78 0.13 155);   --th-on-ok: #161826;      /* rellenos sólidos (diagrama de política) */
  --th-warn-fill: oklch(0.80 0.12 70);  --th-on-warn: #161826;
  --th-err-fill: oklch(0.72 0.14 22);   --th-on-err: #ffffff;
  --th-obs-fill: #9159FF;               --th-on-obs: #ffffff;
  --th-best-bg: oklch(0.62 0.13 155);   --th-on-best: #ffffff;    /* columna «Tracehold» de la tabla comparativa */
  --th-vmix: 55%;                                                 /* intensidad del fondo de las celdas de resultado */
  --th-scale-1: oklch(0.62 0.13 155); --th-scale-2: oklch(0.45 0.08 75);
  --th-scale-3: oklch(0.42 0.08 22);  --th-scale-4: oklch(0.52 0.13 22);   /* escala de exposición */
  --th-band-num: color-mix(in srgb, #161826 82%, #7B38FF);        /* cifras fantasma de la banda violeta */
  --th-band-btn-bg: #161826;  --th-band-btn-bg-h: #232532;
  --th-band-btn-fg: #ffffff;  --th-band-btn-fg-h: #ffffff;
  --th-orb-1: color-mix(in srgb, #5d5294 38%, transparent);       /* halos del héroe */
  --th-orb-2: color-mix(in srgb, #423a6a 60%, transparent);
  --th-prog-end: #e7e5fe;                                         /* final de la barra de progreso de la cabecera */
}

html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f7f7fb;
  --color-surface: #ffffff;
  --color-text: #1b1d2a;
  --color-accent: #5b4bc4;
  --color-accent-2: #6f68b8;
  --color-divider: color-mix(in srgb, #1b1d2a 12%, transparent);

  --color-neutral-100: #1d1f2b;
  --color-neutral-200: #2b2e3b;
  --color-neutral-300: #3d4050;
  --color-neutral-400: #545768;
  --color-neutral-500: #686b7d;
  --color-neutral-600: #8a8d9e;
  --color-neutral-700: #b4b7c6;
  --color-neutral-800: #d9dbe5;
  --color-neutral-900: #eceef4;

  --color-accent-100: #241d52;
  --color-accent-200: #33287a;
  --color-accent-300: #4a3cb0;
  --color-accent-400: #5b4bc4;
  --color-accent-500: #7466d4;
  --color-accent-600: #978be0;
  --color-accent-700: #c2baf2;
  --color-accent-800: #ddd8fa;
  --color-accent-900: #efedfd;

  --shadow-sm: 0 0 0 1px #e1e3ec;
  --shadow-md: 0 0 0 1px #d9dbe5, 0 6px 18px rgba(20, 22, 40, .08);
  --shadow-lg: 0 0 0 1px #c9ccd9, 0 16px 40px rgba(20, 22, 40, .12);

  --th-brand: #6a2cf0;
  --th-brand-2: #7B38FF;
  --th-on-brand: #ffffff;
  --th-ink: #0f1019;
  --th-header-bg: color-mix(in srgb, var(--color-bg) 86%, transparent);
  --th-overlay: rgba(20, 22, 40, .18);
  --th-grid-dot: rgba(27, 29, 42, .07);

  /* — portada: pares claros de los tokens de arriba — */
  --th-hero-dot: color-mix(in srgb, #1b1d2a 13%, transparent);
  --th-pop-shadow: 0 24px 48px -16px rgba(20, 22, 40, .2);
  --th-ok: oklch(0.47 0.12 155);
  --th-warn: oklch(0.54 0.14 55);
  --th-err: oklch(0.5 0.17 22);
  --th-err-a: oklch(0.5 0.17 22);
  --th-err-b: oklch(0.5 0.17 22);
  --th-err-x: oklch(0.55 0.17 22);
  --th-ok-bg: oklch(0.94 0.05 155);   --th-ok-fg: oklch(0.36 0.09 155);
  --th-warn-bg: oklch(0.94 0.07 85);  --th-warn-fg: oklch(0.4 0.09 65);
  --th-err-bg: oklch(0.94 0.04 22);   --th-err-fg: oklch(0.42 0.15 22);
  --th-chip-bg: oklch(0.92 0.08 85);  --th-chip-fg: oklch(0.4 0.09 65);
  --th-hit-bg: oklch(0.92 0.07 22);
  --th-ok-fill: oklch(0.52 0.13 155);   --th-on-ok: #ffffff;
  --th-warn-fill: oklch(0.82 0.15 80);  --th-on-warn: #1c1500;
  --th-err-fill: oklch(0.54 0.18 24);   --th-on-err: #ffffff;
  --th-obs-fill: #6a2cf0;               --th-on-obs: #ffffff;
  --th-best-bg: oklch(0.5 0.12 155);    --th-on-best: #ffffff;
  --th-vmix: 100%;
  --th-scale-1: oklch(0.72 0.15 155); --th-scale-2: oklch(0.82 0.14 85);
  --th-scale-3: oklch(0.72 0.16 50);  --th-scale-4: oklch(0.6 0.2 25);
  --th-band-num: color-mix(in srgb, #12083a 52%, #6a2cf0);
  --th-band-btn-bg: #ffffff;  --th-band-btn-bg-h: #f1ecff;
  --th-band-btn-fg: #4a1fc0;  --th-band-btn-fg-h: #3a14a0;
  --th-orb-1: color-mix(in srgb, #c2baf2 34%, transparent);
  --th-orb-2: color-mix(in srgb, #ddd8fa 70%, transparent);
  --th-prog-end: #a98bff;
}