/* ============================================================================
   NEMESIS · themes.css — temas seleccionables
   Cada tema declara solo su paleta corta (--th-*) y de ahí se derivan todos los
   tokens semánticos (--nt-*), así ningún componente necesita saber del tema.
   Incluye los temas de la página de telemetría (matrix, tron, blade, cyborg,
   interstellar, apollo) y otros cuantos: dracula, nord, synthwave, gruvbox,
   tokyo night, cybercore (sebyx07/cybercore-css), night city, termynal
   (ines/termynal), ámbar CRT, glaciar, crimson, solarized y vaporwave.
   ========================================================================== */

/* --- 1. derivación: de --th-* a todos los --nt-* --------------------------- */
body[data-theme]{
  --nt-canvas:var(--th-bg);
  --nt-canvas-2:var(--th-bg2);
  --nt-surface-1:color-mix(in srgb,var(--th-bg) 93%,var(--th-text) 7%);
  --nt-surface-2:color-mix(in srgb,var(--th-bg) 88%,var(--th-text) 12%);
  --nt-surface-3:color-mix(in srgb,var(--th-bg) 82%,var(--th-text) 18%);
  --nt-overlay:color-mix(in srgb,var(--th-bg) 88%,transparent);

  --nt-border-subtle:color-mix(in srgb,var(--th-accent) 16%,transparent);
  --nt-border-default:color-mix(in srgb,var(--th-accent) 34%,transparent);
  --nt-border-strong:color-mix(in srgb,var(--th-accent) 62%,transparent);

  --nt-text-primary:var(--th-text);
  --nt-text-secondary:color-mix(in srgb,var(--th-text) 76%,var(--th-muted));
  --nt-text-muted:var(--th-muted);
  --nt-text-dim:color-mix(in srgb,var(--th-muted) 72%,transparent);

  --nt-cyan:var(--th-accent2);
  --nt-cyan-dim:color-mix(in srgb,var(--th-accent2) 45%,transparent);
  --nt-green:var(--th-green);
  --nt-green-dim:color-mix(in srgb,var(--th-green) 45%,transparent);
  --nt-amber:var(--th-amber);
  --nt-amber-dim:color-mix(in srgb,var(--th-amber) 45%,transparent);
  --nt-red:var(--th-red);
  --nt-red-dim:color-mix(in srgb,var(--th-red) 45%,transparent);
  --nt-violet:var(--th-violet);

  --nt-glow-cyan:color-mix(in srgb,var(--th-accent2) 16%,transparent);
  --nt-glow-green:color-mix(in srgb,var(--th-green) 14%,transparent);
  --nt-glow-amber:color-mix(in srgb,var(--th-amber) 14%,transparent);
  --nt-glow-red:color-mix(in srgb,var(--th-red) 14%,transparent);

  --nt-grid:linear-gradient(color-mix(in srgb,var(--th-accent) 6%,transparent) 1px,transparent 1px),
            linear-gradient(90deg,color-mix(in srgb,var(--th-accent) 6%,transparent) 1px,transparent 1px);
  --nt-scan:repeating-linear-gradient(0deg,color-mix(in srgb,var(--th-accent) 5%,transparent) 0 1px,transparent 1px 3px);
  --nt-shadow:0 0 0 1px color-mix(in srgb,var(--th-accent) 12%,transparent),0 8px 26px rgba(0,0,0,.5);
}

/* --- 2. paletas ------------------------------------------------------------ */
body[data-theme="nemesis"]{       /* el de siempre: cian y violeta */
  --th-bg:#02040a; --th-bg2:#050a14; --th-text:#d7e6f2; --th-muted:#5d7a90;
  --th-accent:#38f8ff; --th-accent2:#38f8ff; --th-green:#39ff88; --th-amber:#ffc247;
  --th-red:#ff5470; --th-violet:#b388ff;
}
body[data-theme="matrix"]{
  --th-bg:#0D0208; --th-bg2:#04140a; --th-text:#dcffe8; --th-muted:#6fbf8a;
  --th-accent:#00ff41; --th-accent2:#7dffb0; --th-green:#7dffb0; --th-amber:#c8e05c;
  --th-red:#ff5470; --th-violet:#00d0a0;
}
body[data-theme="tron"]{
  --th-bg:#05080d; --th-bg2:#0a1e2b; --th-text:#e6fbff; --th-muted:#6d8f9b;
  --th-accent:#aacfd1; --th-accent2:#6ff2ff; --th-green:#7dffd0; --th-amber:#ff9a3c;
  --th-red:#ff7a9c; --th-violet:#c9a7ff;
}
body[data-theme="blade"]{
  --th-bg:#090B0A; --th-bg2:#1a0d06; --th-text:#f6dcc9; --th-muted:#8a6a55;
  --th-accent:#cc5e37; --th-accent2:#ffb26b; --th-green:#9fd86b; --th-amber:#ffd08a;
  --th-red:#ff6b5c; --th-violet:#d9a2ff;
}
body[data-theme="cyborg"]{
  --th-bg:#04191c; --th-bg2:#0a3333; --th-text:#d8ffff; --th-muted:#5d9c9c;
  --th-accent:#5cffff; --th-accent2:#85ff5c; --th-green:#85ff5c; --th-amber:#ffe066;
  --th-red:#ff7a7a; --th-violet:#b98bff;
}
body[data-theme="apollo"]{
  --th-bg:#191919; --th-bg2:#232a33; --th-text:#ebebeb; --th-muted:#9aa3ab;
  --th-accent:#ebebeb; --th-accent2:#9ad3ff; --th-green:#8fe3a8; --th-amber:#ffe9a3;
  --th-red:#ff9ad2; --th-violet:#c3b0ff;
}
body[data-theme="dracula"]{
  --th-bg:#1e1f29; --th-bg2:#282a36; --th-text:#f8f8f2; --th-muted:#6272a4;
  --th-accent:#bd93f9; --th-accent2:#8be9fd; --th-green:#50fa7b; --th-amber:#f1fa8c;
  --th-red:#ff5555; --th-violet:#ff79c6;
}
body[data-theme="nord"]{
  --th-bg:#242933; --th-bg2:#2e3440; --th-text:#eceff4; --th-muted:#7b88a1;
  --th-accent:#88c0d0; --th-accent2:#8fbcbb; --th-green:#a3be8c; --th-amber:#ebcb8b;
  --th-red:#bf616a; --th-violet:#b48ead;
}
body[data-theme="synthwave"]{
  --th-bg:#1b1224; --th-bg2:#241b2f; --th-text:#f4eee4; --th-muted:#a58fb5;
  --th-accent:#ff7edb; --th-accent2:#36f9f6; --th-green:#72f1b8; --th-amber:#fede5d;
  --th-red:#fe4450; --th-violet:#b893ce;
}
body[data-theme="gruvbox"]{
  --th-bg:#1d2021; --th-bg2:#282828; --th-text:#ebdbb2; --th-muted:#a89984;
  --th-accent:#fabd2f; --th-accent2:#8ec07c; --th-green:#b8bb26; --th-amber:#fabd2f;
  --th-red:#fb4934; --th-violet:#d3869b;
}
body[data-theme="tokyo"]{
  --th-bg:#16161e; --th-bg2:#1a1b26; --th-text:#c0caf5; --th-muted:#565f89;
  --th-accent:#7aa2f7; --th-accent2:#7dcfff; --th-green:#9ece6a; --th-amber:#e0af68;
  --th-red:#f7768e; --th-violet:#bb9af7;
}
body[data-theme="cybercore"]{     /* sebyx07/cybercore-css */
  --th-bg:#0a0a0f; --th-bg2:#12121a; --th-text:#e8f7ff; --th-muted:#b4b4b4;
  --th-accent:#00f0ff; --th-accent2:#00f0ff; --th-green:#05ffa1; --th-amber:#fcee0a;
  --th-red:#ff2a6d; --th-violet:#b14aff;
}
body[data-theme="nightcity"]{     /* 2077: amarillo y rojo sobre azul noche */
  --th-bg:#0b0b12; --th-bg2:#14141f; --th-text:#f7f7ff; --th-muted:#8b8ba7;
  --th-accent:#fcee0a; --th-accent2:#00f0ff; --th-green:#3ff0a0; --th-amber:#fcee0a;
  --th-red:#ff003c; --th-violet:#ff7ae0;
}
body[data-theme="termynal"]{      /* ines/termynal: terminal clásico */
  --th-bg:#0c0c0c; --th-bg2:#141414; --th-text:#f2f2f2; --th-muted:#8a8a8a;
  --th-accent:#3ddc84; --th-accent2:#eaeaea; --th-green:#3ddc84; --th-amber:#ffcc66;
  --th-red:#ff5c5c; --th-violet:#9ad3ff;
}
body[data-theme="amber"]{         /* CRT ámbar */
  --th-bg:#0c0800; --th-bg2:#150e02; --th-text:#ffd9a0; --th-muted:#a86f1e;
  --th-accent:#ffb000; --th-accent2:#ffcc66; --th-green:#b8ff5c; --th-amber:#ffb000;
  --th-red:#ff6b3d; --th-violet:#ff9e64;
}
body[data-theme="ice"]{
  --th-bg:#061018; --th-bg2:#0a1c28; --th-text:#dff1ff; --th-muted:#5f8ba6;
  --th-accent:#6fe3ff; --th-accent2:#a8f0ff; --th-green:#5cffc4; --th-amber:#ffd98a;
  --th-red:#ff7a90; --th-violet:#9db8ff;
}
body[data-theme="crimson"]{
  --th-bg:#0d0406; --th-bg2:#18080c; --th-text:#ffe3e8; --th-muted:#a06470;
  --th-accent:#ff4d6d; --th-accent2:#ff8fa3; --th-green:#6ee7a8; --th-amber:#ffc247;
  --th-red:#ff3b5c; --th-violet:#c084fc;
}
body[data-theme="solarized"]{
  --th-bg:#00252e; --th-bg2:#002b36; --th-text:#eee8d5; --th-muted:#7d9aa3;
  --th-accent:#b58900; --th-accent2:#2aa198; --th-green:#859900; --th-amber:#cb4b16;
  --th-red:#dc322f; --th-violet:#6c71c4;
}
body[data-theme="vapor"]{
  --th-bg:#1b1030; --th-bg2:#251542; --th-text:#fdf6ff; --th-muted:#9d7fd0;
  --th-accent:#ff71ce; --th-accent2:#01cdfe; --th-green:#05ffa1; --th-amber:#fffb96;
  --th-red:#ff5f9e; --th-violet:#b967ff;
}

/* --- 3. el único tema claro: superficies y sombras propias ---------------- */
body[data-theme="interstellar"]{
  --th-bg:#dedede; --th-bg2:#eef6fb; --th-text:#0b2b38; --th-muted:#4d7383;
  --th-accent:#03A9F4; --th-accent2:#1f7fd0; --th-green:#0b8a45; --th-amber:#9a6a00;
  --th-red:#c22b45; --th-violet:#6a3fbf;
  --nt-surface-1:#f5fafd; --nt-surface-2:#e9f2f8; --nt-surface-3:#dcebf4;
  --nt-border-subtle:rgba(3,120,180,.16); --nt-border-default:rgba(3,120,180,.32);
  --nt-border-strong:rgba(3,120,180,.52);
  --nt-text-primary:#0b2b38; --nt-text-secondary:#28536b; --nt-text-muted:#4d7383; --nt-text-dim:#8aa8b8;
  --nt-glow-cyan:rgba(3,169,244,.14); --nt-glow-green:rgba(11,138,69,.12);
  --nt-glow-amber:rgba(154,106,0,.12); --nt-glow-red:rgba(194,43,69,.12);
  --nt-shadow:0 0 0 1px rgba(3,120,180,.14),0 6px 18px rgba(10,40,60,.12);
}

/* --- 4. detalles de cada tema --------------------------------------------- */
/* termynal: el prompt de terminal y el cursor parpadeando */
body[data-theme="termynal"] .panel-title::before{content:"$ ";color:var(--nt-green)}
body[data-theme="termynal"] .hero-title::after{content:"▌";margin-left:6px;color:var(--nt-green);animation:ntBlink 1.05s steps(1) infinite}
body[data-theme="termynal"] .panel{border-style:dashed}
@keyframes ntBlink{50%{opacity:0}}
/* cybercore: rejilla de neón en las esquinas */
body[data-theme="cybercore"] .panel.accent-amber::after,
body[data-theme="nightcity"] .panel.accent-amber::after{border-color:var(--nt-amber)}
/* la chispa del título hereda el acento del tema */
body[data-theme] .hero-title{color:var(--nt-cyan)}

/* --- 5. selector de temas (cabecera) -------------------------------------- */
.temabar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 10px;
  border:1px solid var(--nt-border-subtle);background:color-mix(in srgb,var(--nt-surface-1) 70%,transparent);
  border-radius:var(--nt-radius-sm)}
.tema-label{font-family:var(--nt-font-ui);font-size:var(--nt-type-2xs);letter-spacing:var(--nt-ls-wider);
  text-transform:uppercase;color:var(--nt-text-muted)}
.temas{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.tema-chip{display:flex;align-items:center;gap:5px;cursor:pointer;font-family:var(--nt-font-data);
  font-size:var(--nt-type-2xs);letter-spacing:var(--nt-ls-wide);text-transform:uppercase;
  padding:3px 6px;background:transparent;color:var(--nt-text-muted);
  border:1px solid var(--nt-border-subtle);border-radius:var(--nt-radius-xs);transition:border-color .15s,color .15s}
.tema-chip i{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 6px currentColor;color:inherit}
.tema-chip:hover{color:var(--nt-text-primary);border-color:var(--nt-border-strong)}
.tema-chip[aria-pressed="true"]{color:var(--nt-canvas);background:var(--nt-cyan);border-color:var(--nt-cyan);font-weight:700}
@media(max-width:767px){
  .temabar{padding:6px 8px;gap:7px}
  .temas{gap:3px}
  .tema-chip{padding:3px 5px}
  .tema-chip span{display:none}
  .tema-chip[aria-pressed="true"] span{display:inline}
}