/*
 * x99 base — helpers + resets canonical que consomem tokens.
 * Carregar depois de x99-tokens.css, antes de CSS por-surface.
 */

/* ==========================================================================
 * Body scoped to canonical tokens (quando body.x99-theme class presente)
 * Lagom já tem seu próprio reset; este arquivo NÃO sobrescreve globals.
 * ========================================================================== */

/* Transições suaves de troca de tema */
html[data-theme] body,
html[data-theme] .x99-card,
html[data-theme] .x99-btn,
html[data-theme] .x99-theme-toggle {
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/* ==========================================================================
 * Theme toggle component (top-right navbar)
 * ========================================================================== */
.x99-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-full);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-primary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.x99-theme-toggle:hover {
  background: var(--c-surface-hover);
  transform: translateY(-1px);
}

.x99-theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

.x99-theme-toggle:active {
  transform: translateY(0);
}

/* Ícones sol/lua absolutos (um visível, outro hidden) */
.x99-theme-toggle .icon-sun,
.x99-theme-toggle .icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  color: var(--c-text-primary);
  transform: translate(-50%, -50%) scale(1) rotate(0);
  transition:
    transform var(--dur-med) var(--ease-out),
    opacity var(--dur-med) var(--ease-out);
}

/* dark mode: sol visível (representa "mudar pra light") */
:root[data-theme="dark"] .x99-theme-toggle .icon-sun,
:root:not([data-theme]) .x99-theme-toggle .icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
}
:root[data-theme="dark"] .x99-theme-toggle .icon-moon,
:root:not([data-theme]) .x99-theme-toggle .icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0);
}

/* light mode: lua visível (representa "mudar pra dark") */
:root[data-theme="light"] .x99-theme-toggle .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}
:root[data-theme="light"] .x99-theme-toggle .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
}

/* Fallback fixed (todas as páginas — top-right onipresente) */
.x99-theme-toggle--fixed {
  position: fixed;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 1000;
  width: 40px;
  height: 40px;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--sh-card), 0 0 0 4px var(--c-bg-base);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.x99-theme-toggle--fixed:hover {
  border-color: var(--c-accent);
}

.x99-theme-toggle--fixed .icon-sun,
.x99-theme-toggle--fixed .icon-moon {
  width: 20px;
  height: 20px;
}

/* Em mobile, afasta do edge pra não sobrepor conteúdo */
@media (max-width: 640px) {
  .x99-theme-toggle--fixed {
    top: var(--sp-4);
    right: var(--sp-4);
    width: 36px;
    height: 36px;
  }
  .x99-theme-toggle--fixed .icon-sun,
  .x99-theme-toggle--fixed .icon-moon {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
 * Helpers canonical (opt-in — adicione classe pra usar)
 * ========================================================================== */

/* Cards canonical */
.x99-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--sh-card);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.x99-card--interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-card-hover);
  background: var(--c-surface-hover);
}
.x99-card-divider {
  border-top: 1px dashed var(--c-border-strong);
  margin: var(--sp-4) 0;
}

/* Kicker (uppercase label) */
.x99-kicker {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
}

/* CTA primário canonical */
.x99-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.x99-btn:hover { transform: translateY(-1px); }
.x99-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.x99-btn:active { transform: translateY(0); }
.x99-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.x99-btn-primary {
  background: var(--c-accent);
  color: var(--c-text-inverse);
}
.x99-btn-primary:hover {
  background: var(--c-accent-warm);
}

.x99-btn-secondary {
  background: transparent;
  border-color: var(--c-border-strong);
  color: var(--c-text-primary);
}
.x99-btn-secondary:hover {
  background: var(--c-surface-hover);
}

/* Pills/chips */
.x99-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  border: 1px solid var(--c-border);
}
.x99-pill--ddr4  { background: var(--c-info-soft); color: var(--c-info); }
.x99-pill--ddr5  { background: var(--c-accent-soft); color: var(--c-accent); }
.x99-pill--nvme  { background: var(--c-accent-soft); color: var(--c-accent); }
.x99-pill--ssd   { background: var(--c-info-soft); color: var(--c-info); }
.x99-pill--hdd   { background: var(--c-surface); color: var(--c-text-muted); }
.x99-pill--last-stock { background: var(--c-danger-soft); color: var(--c-danger); }
.x99-pill--success { background: var(--c-success-soft); color: var(--c-success); }
.x99-pill--warning { background: var(--c-warning-soft); color: var(--c-warning); }

/* Focus visible global (opt-in via body class .x99-focus-ring se desejar) */
.x99-focus-ring :focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}