/* SysManager Design System — local fonts + tokens */
@font-face { font-family: "Sora"; src: url("./fonts/Sora-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url("./fonts/Sora-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url("./fonts/Sora-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("./fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("./fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  /* Neon spectrum — vibrant, saturated, max-contrast on piano-black */
  --sys-magenta: #FF2DAA;        /* hot magenta */
  --sys-magenta-bright: #FF54BF;
  --sys-blue: #2D7DFF;            /* electric blue */
  --sys-blue-bright: #5DA0FF;
  --sys-cyan: #00E5FF;            /* neon cyan */
  --sys-lime: #B6FF3C;            /* neon lime */
  --sys-amber: #FFB000;           /* neon amber */
  --sys-violet: #B964FF;          /* neon violet */

  /* DARK — piano black */
  --bg: #000000;
  --bg-deep: #000000;
  --surface: #0A0A0A;             /* near-black panel */
  --surface-2: #141414;
  --fg: #FFFFFF;                  /* pure white */
  --fg-muted: #C8C8C8;            /* solid mid-gray, not transparent */
  --fg-dim: #909090;              /* solid darker gray */
  --border: #1F1F1F;              /* solid dark */
  --border-strong: #2E2E2E;

  /* Role spectrum — neon, max contrast vs piano-black */
  --human: #FFB000;        /* neon amber */
  --human-soft: rgba(255,176,0,0.10);
  --ai: var(--sys-magenta);
  --ai-soft: rgba(255,45,170,0.10);
  --validator: #B964FF;    /* neon violet */
  --validator-soft: rgba(185,100,255,0.10);
  --bridge: #00E5FF;       /* neon cyan */
  --bridge-soft: rgba(0,229,255,0.10);
  --ok: #B6FF3C;
  --warn: #FFB000;
  --danger: #FF4D4D;

  /* phase colors */
  --ph-research: #00E5FF;
  --ph-plan: #FF2DAA;
  --ph-implement: #B964FF;

  --font-display: "Sora", system-ui, sans-serif;
  --font-ui: "Montserrat", system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", Menlo, monospace;

  --r-pill: 999px;
  --r-asym: 30px 8px 30px 8px;
  --r-asym-tag: 20px 4px 20px 4px;
  --glow-magenta: 0 0 24px 0 rgba(255,45,170,0.55), 0 0 48px 0 rgba(255,45,170,0.25);
  --glow-cyan:    0 0 24px 0 rgba(0,229,255,0.55),  0 0 48px 0 rgba(0,229,255,0.25);
  --glow-lime:    0 0 24px 0 rgba(182,255,60,0.55), 0 0 48px 0 rgba(182,255,60,0.22);
  --glow-amber:   0 0 24px 0 rgba(255,176,0,0.55),  0 0 48px 0 rgba(255,176,0,0.25);
  --glow-violet:  0 0 24px 0 rgba(185,100,255,0.55),0 0 48px 0 rgba(185,100,255,0.25);
  --glow-blue:    0 0 24px 0 rgba(45,125,255,0.55), 0 0 48px 0 rgba(45,125,255,0.25);

  --speed: 1;
}

[data-theme="light"] {
  /* LIGHT — snow white */
  --bg: #FFFFFF;
  --bg-deep: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F4F5;
  --fg: #000000;                /* pure black for max contrast */
  --fg-muted: #2A2A2A;           /* solid dark, not transparent */
  --fg-dim: #5A5A5A;
  --border: #1A1A1A;             /* solid dark borders */
  --border-strong: #000000;

  /* Slightly darkened neons for white BG (still vibrant, AA contrast) */
  --sys-magenta: #D60080;
  --sys-magenta-bright: #FF2DAA;
  --sys-blue: #0040E0;
  --sys-cyan: #007A99;
  --sys-lime: #4D9900;
  --sys-amber: #B36800;
  --sys-violet: #7E2CE0;

  --human: #B36800;
  --human-soft: rgba(179,104,0,0.10);
  --ai: #D60080;
  --ai-soft: rgba(214,0,128,0.10);
  --validator: #7E2CE0;
  --validator-soft: rgba(126,44,224,0.10);
  --bridge: #007A99;
  --bridge-soft: rgba(0,122,153,0.10);
  --ok: #2E7D00;
  --warn: #B36800;
  --danger: #C8001E;

  --ph-research: #007A99;
  --ph-plan: #D60080;
  --ph-implement: #7E2CE0;

  --glow-magenta: 0 0 0 1px #D60080;
  --glow-cyan:    0 0 0 1px #007A99;
  --glow-lime:    0 0 0 1px #4D9900;
  --glow-amber:   0 0 0 1px #B36800;
  --glow-violet:  0 0 0 1px #7E2CE0;
  --glow-blue:    0 0 0 1px #0040E0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-ui); }

deck-stage section {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  font-family: var(--font-ui);
}

/* Fallback defensivo: skill strings longas (ex: "S: TLC 7-stack (ADR + RFC +
   tactical-ddd + decomposição + acoplamento + migração)") devem quebrar dentro
   dos cards do CAST sem causar overflow horizontal. Escopo apertado em
   `.skill-list` (class declarada em `slides-part0.jsx` no <ul> do cast) — não
   afeta listas de outros slides/exportações. Codex review 2026-05-21 alertou
   sobre side-effect global, restringido aqui. */
.skill-list li {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Ambient color blobs — REMOVIDOS por decisão de design 2026-05-01.
   Modo escuro = black piano puro (sem gradientes).
   Modo claro = branco neve puro. */
.amb-magenta, .amb-blue { display: none !important; }

.eyebrow {
  font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted);
}
.eyebrow .dot { color: var(--sys-magenta); margin: 0 8px; }

h1.display, h2.display, h3.display { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; color: var(--fg); }
h1.display { font-size: 96px; line-height: 1.08; font-weight: 700; }
h2.display { font-size: 64px; line-height: 1.12; font-weight: 700; }
h3.display { font-size: 36px; line-height: 1.2; font-weight: 700; }

/* Solid neon accents — replaces gradient-text. JSX still uses .gradient-text class;
   we keep the class but render as solid neon magenta with a subtle text-shadow glow. */
.gradient-text {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--sys-magenta);
  text-shadow: 0 0 24px rgba(255,45,170,0.45);
}
[data-theme="light"] .gradient-text { color: var(--sys-magenta); text-shadow: none; }

.accent-cyan { color: var(--sys-cyan); text-shadow: 0 0 24px rgba(0,229,255,0.40); }
.accent-lime { color: var(--sys-lime); text-shadow: 0 0 24px rgba(182,255,60,0.40); }
.accent-amber { color: var(--sys-amber); text-shadow: 0 0 24px rgba(255,176,0,0.40); }
.accent-violet { color: var(--sys-violet); text-shadow: 0 0 24px rgba(185,100,255,0.40); }
[data-theme="light"] .accent-cyan,
[data-theme="light"] .accent-lime,
[data-theme="light"] .accent-amber,
[data-theme="light"] .accent-violet { text-shadow: none; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--sys-magenta);
  background: transparent;
  color: var(--fg);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--glow-magenta);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--r-pill);
  background: var(--sys-magenta); color: #fff;
  font-weight: 700; box-shadow: var(--glow-magenta);
  border: 0; cursor: pointer;
}

/* deck-stage default 1920x1080 */
deck-stage { display: block; width: 100%; height: 100vh; background: var(--bg-deep); }

/* slide layout helpers */
.slide-pad { position: absolute; inset: 0; padding: 88px 120px; z-index: 2; display: flex; flex-direction: column; }
.slide-pad.center { justify-content: center; align-items: flex-start; }

.deck-header {
  position: absolute; top: 36px; left: 120px; right: 120px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 3;
}
.deck-header img.logo { height: 32px; opacity: .9; }
[data-theme="light"] .deck-header img.logo,
[data-theme="light"] img[src$="logo-white.svg"] { filter: invert(1); }
/* Titulo central do header — posicao absoluta para ficar fixo no centro
   horizontal do header (independente da largura do logo a esquerda e do
   wiki-badge fixed a direita). Em viewports muito estreitos pode ocultar
   via media query mobile abaixo. */
.deck-header .nav-meta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-family: var(--font-mono);
}
@media (max-width: 900px) {
  /* Mobile: titulo central oculto para nao colidir com theme-toggle/wiki-badge
     que estao stack no canto direito. Identidade visual permanece no logo. */
  .deck-header .nav-meta { display: none; }
}

.deck-footer {
  position: absolute; bottom: 36px; left: 120px; right: 120px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--fg-dim); z-index: 3;
}

/* Host do GlobalWikiBadge — isola stacking context para garantir que o
   badge fique acima das tap zones do deck-stage (que estão em z-index
   2147482000 dentro do shadow root). Sem isolation, mesmo z-index alto
   no badge não competia corretamente em alguns browsers. */
#wiki-badge-host {
  position: relative;
  z-index: 2147482700;
  isolation: isolate;
}
#theme-toggle-host {
  position: relative;
  z-index: 2147482700;
  isolation: isolate;
}

/* Wiki badge — link clicável destacado, aponta para a página canônica
   da wiki ADO relacionada ao tópico do slide.

   GESTOS para abrir (proteção contra tap zones do deck-stage):
   - Desktop: Ctrl+Click (Windows/Linux) ou ⌘+Click (Mac) abre nova aba
   - Mobile/Tablet: Toque longo (600ms) abre nova aba
   - Click simples NÃO faz nada (evita conflito com avanço de slide) */
.wiki-badge {
  position: fixed;
  top: 28px;
  right: 180px;
  z-index: 2147482500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--bridge);
  background: var(--bridge-soft);
  color: var(--bridge);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0, 229, 255, 0.3);
  touch-action: manipulation;
}
.wiki-badge:hover {
  background: rgba(0, 229, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 0 24px -6px var(--bridge);
}
.wiki-badge:active {
  transform: translateY(0);
  background: rgba(0, 229, 255, 0.25);
}
.wiki-badge .wb-icon { font-size: 14px; }
.wiki-badge .wb-label { color: var(--fg); font-weight: 600; }
.wiki-badge .wb-arrow { color: var(--bridge); font-weight: 700; }
.wiki-badge .wb-prefix { color: var(--bridge); }
.wiki-badge .wb-hint {
  color: var(--fg-dim);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border-strong);
  text-transform: none;
}

/* Animação de progresso do long press */
@keyframes wikiBadgeHolding {
  0%   { box-shadow: inset 0 0 0 0 var(--bridge); }
  100% { box-shadow: inset 280px 0 0 0 var(--bridge-soft); }
}
.wiki-badge--holding {
  animation: wikiBadgeHolding 600ms linear forwards;
}

/* Em telas pequenas, badge fica mais compacto e EMPILHADO abaixo do
   theme-toggle (ambos no canto direito, sem sobreposição). */
@media (max-width: 900px) {
  .wiki-badge {
    top: 56px;
    right: 16px;
    padding: 6px 10px 6px 10px;
    font-size: 11px;
  }
  .wiki-badge .wb-prefix { display: none; }
  .wiki-badge .wb-hint { display: none; }
}

/* Theme toggle — botão fixed no canto SUPERIOR esquerdo (mesma altura do
   wiki-badge à direita, formando "par" visual). Mais visível que canto
   inferior. Z-index acima das tap zones do deck-stage. */
@keyframes themeTogglePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 170, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 45, 170, 0); }
}
.theme-toggle {
  position: fixed;
  top: 28px;
  right: 28px;
  z-index: 2147482500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  border: 2px solid var(--sys-magenta);
  background: rgba(255, 45, 170, 0.12);
  color: var(--sys-magenta);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(255, 45, 170, 0.3);
  touch-action: manipulation;
  user-select: none;
  box-shadow: 0 4px 24px -8px var(--sys-magenta);
  animation: themeTogglePulse 2.4s ease-in-out 3;
}
.theme-toggle:hover {
  background: rgba(255, 45, 170, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 0 28px -4px var(--sys-magenta);
}
.theme-toggle:active { transform: translateY(0); }
.theme-toggle .tt-icon { font-size: 16px; line-height: 1; }
.theme-toggle .tt-label { color: var(--fg); font-weight: 700; }
@media (max-width: 900px) {
  .theme-toggle { top: 16px; right: 16px; padding: 8px 12px; font-size: 12px; }
}

/* Header reserva espaço para o wiki-badge fixed posicionado em right:180px
   (badge ~310px de largura → reserva 510 para evitar overlap com nav-meta).
   Em mobile o wiki-badge é empilhado abaixo do theme-toggle, então só
   precisamos limpar o theme-toggle (right:16 + width ~85 = 101). */
.deck-header { gap: 16px; padding-right: 510px; }
@media (max-width: 900px) { .deck-header { padding-right: 110px; } }

/* card / panel — solid surface, neon border accents handled per-component */
.panel {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 20px;
}
.panel.asym { border-radius: var(--r-asym); }

/* role chip — for legend */
.role-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; border: 1px solid var(--border-strong);
  color: var(--fg);
}
.role-chip .swatch { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
[data-theme="light"] .role-chip .swatch { box-shadow: none; }

/* keyframes */
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,45,170,0.0); }
  50% { box-shadow: var(--glow-magenta); }
}
@keyframes drift { 0% { transform: translate(0,0); } 50% { transform: translate(30px,-15px); } 100% { transform: translate(0,0); } }

/* scrollbar inside slides */
.slide-pad ::-webkit-scrollbar { width: 6px; }
.slide-pad ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }

/* subtle grid bg — neon green grid on piano-black, faint dark grid on snow-white */
.grid-bg {
  position: absolute; inset: 0; z-index: 0; opacity: 0.10;
  background-image:
    linear-gradient(to right, var(--sys-cyan) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sys-cyan) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(to right, #000 1px, transparent 1px),
    linear-gradient(to bottom, #000 1px, transparent 1px);
  opacity: 0.05;
}