/* ══════════════════════════════════════════════════════════════
 * Illusia Buttons — Block canônico `.button`
 *
 * Direção "Observatory Mono" (escolhida em v1.75.0 — análoga ao
 * trabalho de stats v1.72.x e tabs v1.73-1.74). Fira Code 500/600,
 * glow só no hover, `._danger` ghost + `._danger._solid` composto.
 *
 * Vocabulário (variantes ortogonais):
 *
 *   BASE                 — CTA âmbar sólido (1 por view)
 *   ._secondary          — Outline âmbar translúcido
 *   ._quick              — Ghost neutro (utility — pattern mais comum)
 *   ._danger             — Ghost crimson (remoções utilitárias)
 *   ._danger._solid      — Crimson sólido (ações irreversíveis)
 *   ._inline             — Link estilizado em prosa
 *   ._navigation         — Ghost com hover âmbar (prev/next)
 *   ._icon               — Quadrado só com ícone
 *
 *   ._sm / ._lg          — Modificadores de tamanho
 *   ._sage / ._teal / ._violet — Cor semântica (composíveis)
 *
 *   [aria-pressed=true]  — Estado de toggle (filter chips, etc.)
 *   [disabled] / ._loading — Estados desabilitado / carregando
 *
 * @since 1.4.0
 * @updated 1.75.0 (PR1 — canônico Observatory Mono)
 * ══════════════════════════════════════════════════════════════ */

/* ── 1. Custom Properties ──
 *
 * Variáveis locais (`--btn-*`) tornam cada variante uma simples
 * troca de tokens, sem reescrever a base. Tokens Fictioneer
 * (`--button-primary-*`) também são definidos pra manter compat
 * com a cadeia herdada (parent define o selector massivo).
 */

:root {
  /* Primary → Amber CTA */
  --button-primary-background: var(--amber);
  --button-primary-background-hover: var(--amber);
  --button-primary-color: var(--fg-inverted);
  --button-primary-color-hover: var(--fg-inverted);
  --button-primary-border: 1px solid transparent;
  --button-primary-border-hover: 1px solid transparent;

  /* Secondary → Outline âmbar */
  --button-secondary-background: transparent;
  --button-secondary-background-hover: var(--amber-glow);
  --button-secondary-color: var(--fg-200);
  --button-secondary-color-hover: var(--amber);
  --button-secondary-border: 1px solid var(--border-amber);
  --button-secondary-border-hover: 1px solid var(--border-active);

  /* Quick → Ghost neutro */
  --button-quick-background: hsl(var(--bg-800-free) / .3);
  --button-quick-background-hover: var(--amber-halo);
  --button-quick-color: var(--fg-400);
  --button-quick-color-hover: var(--amber);

  /* Warning → Crimson ghost (default) */
  --button-warning-background: hsl(var(--crimson-free) / .06);
  --button-warning-background-hover: hsl(var(--crimson-free) / .12);
  --button-warning-color: var(--crimson);
  --button-warning-color-hover: var(--crimson);

  /* Loading state */
  --button-barberpole: hsl(var(--amber-free) / .15);

  /* Default box-shadow (Fictioneer override) — none */
  --button-box-shadow: none;
}

/* ── 2. Base `.button` ──
 *
 * Fira Code 500 uppercase + letter-spacing .08em + padding fluido.
 * Variáveis locais (`--btn-*`) controlam tudo — cada modificador
 * só sobrescreve o que precisa.
 */

:root .button {
  --btn-bg:           var(--amber);
  --btn-fg:           var(--fg-inverted);
  --btn-border:       transparent;
  --btn-bg-hover:     var(--amber);
  --btn-fg-hover:     var(--fg-inverted);
  --btn-border-hover: transparent;
  --btn-pad-y:        var(--space-2xs);
  --btn-pad-x:        var(--space-md);
  --btn-size:         var(--text-xs);
  --btn-weight:       600;
  --btn-radius:       var(--r-md);
  --btn-letter:       .08em;

  font-family:        var(--ff-mono);
  font-size:          var(--btn-size);
  font-weight:        var(--btn-weight);
  letter-spacing:     var(--btn-letter);
  text-transform:     uppercase;
  padding:            var(--btn-pad-y) var(--btn-pad-x);
  border-radius:      var(--btn-radius);
  border:             1px solid var(--btn-border);
  background:         var(--btn-bg);
  color:              var(--btn-fg);
  gap:                var(--space-2xs);
  box-shadow:         none;
  transition:
    color var(--t-fast) var(--ease-std),
    background-color var(--t-fast) var(--ease-std),
    border-color var(--t-fast) var(--ease-std),
    transform var(--t-mid) var(--ease-expo),
    box-shadow var(--t-mid) var(--ease-expo),
    opacity var(--t-fast) var(--ease-std);
}

:root .button:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-border-hover);
}

:root .button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

:root .button i {
  font-size: .92em;
  opacity: .85;
}

/* ── 3. CTA (default) — glow ON HOVER (Regra 8 lift) ──
 *
 * `:where()` zera a especificidade dos `:not()`, mantendo o glow
 * como default de baixa prioridade. Contextos utility (modal, TTS,
 * paragraph-tools, profile) NÃO precisam mais desligar — variantes
 * `._secondary/._quick/._danger/._inline/._navigation` não recebem
 * o lift.
 */

:root .button:where(:not(._secondary):not(._quick):not(._danger):not(._inline):not(._navigation):not([disabled])):hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px hsl(var(--amber-free) / .22),
    inset 0 1px 0 hsl(0 0% 100% / .12);
}

/* ── 4. `._secondary` — Outline âmbar ── */

:root .button._secondary {
  --btn-bg:           var(--button-secondary-background);
  --btn-fg:           var(--button-secondary-color);
  --btn-border:       var(--border-amber);
  --btn-bg-hover:     var(--button-secondary-background-hover);
  --btn-fg-hover:     var(--button-secondary-color-hover);
  --btn-border-hover: var(--border-active);
  --btn-weight:       500;
}

/* ── 5. `._quick` — Ghost neutro (utility) ── */

:root .button._quick {
  --btn-bg:           var(--button-quick-background);
  --btn-fg:           var(--button-quick-color);
  --btn-border:       var(--border-1);
  --btn-bg-hover:     var(--button-quick-background-hover);
  --btn-fg-hover:     var(--button-quick-color-hover);
  --btn-border-hover: var(--border-amber);
  --btn-weight:       500;
}

/* `._quick` aceita `[aria-pressed=true]` (filter chips, follow,
 * toggles). Bg amber/.15 + amber color + weight 600. */
:root .button._quick[aria-pressed="true"] {
  --btn-bg:     hsl(var(--amber-free) / .15);
  --btn-fg:     var(--amber);
  --btn-border: var(--border-amber);
  --btn-weight: 600;
}

/* ── 6. `._danger` — Ghost crimson (default) ── */

:root .button._danger {
  --btn-bg:           var(--button-warning-background);
  --btn-fg:           var(--button-warning-color);
  --btn-border:       hsl(var(--crimson-free) / .25);
  --btn-bg-hover:     var(--button-warning-background-hover);
  --btn-fg-hover:     var(--button-warning-color-hover);
  --btn-border-hover: hsl(var(--crimson-free) / .5);
  --btn-weight:       500;
}

/* ── 6b. `._danger._solid` — Crimson sólido (ações irreversíveis) ── */

:root .button._danger._solid {
  --btn-bg:           var(--crimson);
  --btn-fg:           var(--fg-inverted);
  --btn-border:       transparent;
  --btn-bg-hover:     var(--crimson);
  --btn-fg-hover:     var(--fg-inverted);
  --btn-border-hover: transparent;
  --btn-weight:       600;
}

:root .button._danger._solid:not([disabled]):hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px hsl(var(--crimson-free) / .25),
    inset 0 1px 0 hsl(0 0% 100% / .12);
}

/* ── 7. `._inline` — Link estilizado em prosa ── */

:root .button._inline {
  --btn-bg:           transparent;
  --btn-fg:           var(--amber);
  --btn-border:       transparent;
  --btn-bg-hover:     transparent;
  --btn-fg-hover:     var(--amber);
  --btn-border-hover: transparent;
  --btn-pad-y:        0;
  --btn-pad-x:        0;
  --btn-weight:       500;
  --btn-letter:       .04em;
  text-transform:     none;
}

:root .button._inline:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ── 8. `._navigation` — Prev/next (chapter, paginação direcional) ── */

:root .button._navigation {
  --btn-bg:           transparent;
  --btn-fg:           var(--fg-300);
  --btn-border:       var(--border-1);
  --btn-bg-hover:     var(--amber-halo);
  --btn-fg-hover:     var(--amber);
  --btn-border-hover: var(--border-amber);
  --btn-weight:       500;
  --btn-letter:       .04em;
}

/* ── 9. Modificadores de tamanho ── */

:root .button._sm {
  --btn-size:   var(--text-2xs);
  --btn-pad-y:  var(--space-3xs);
  --btn-pad-x:  var(--space-sm);
  --btn-radius: var(--r-sm);
}

:root .button._lg {
  --btn-size:   var(--text-sm);
  --btn-pad-y:  var(--space-sm);
  --btn-pad-x:  var(--space-lg);
  --btn-radius: var(--r-md);
}

/* ── 10. `._icon` — Quadrado só com ícone ── */

:root .button._icon {
  --btn-pad-x: var(--btn-pad-y);
  width:  clamp(28px, 3vw, 36px);
  height: clamp(28px, 3vw, 36px);
  padding: 0;
  letter-spacing: 0;
}

/* ── 11. Cor semântica (modifiers compostos) ──
 *
 * `._sage / ._teal / ._violet` aplicam-se sobre ANY variante
 * (default, secondary, quick, danger, navigation, inline). Use
 * apenas quando a ação tem identidade própria (não decorativa).
 * Ex: "Dar flores" → `._quick._sage` ; "Conectar Discord" →
 * `._quick._teal`.
 */

:root .button._sage {
  --btn-fg:           var(--sage);
  --btn-bg-hover:     hsl(var(--sage-free) / .12);
  --btn-fg-hover:     var(--sage);
  --btn-border:       hsl(var(--sage-free) / .25);
  --btn-border-hover: hsl(var(--sage-free) / .5);
}
:root .button._sage:not(._secondary):not(._quick):not(._danger):not(._inline):not(._navigation) {
  --btn-bg: hsl(var(--sage-free) / .06);
}

:root .button._teal {
  --btn-fg:           var(--teal);
  --btn-bg-hover:     hsl(var(--teal-free) / .12);
  --btn-fg-hover:     var(--teal);
  --btn-border:       hsl(var(--teal-free) / .25);
  --btn-border-hover: hsl(var(--teal-free) / .5);
}
:root .button._teal:not(._secondary):not(._quick):not(._danger):not(._inline):not(._navigation) {
  --btn-bg: hsl(var(--teal-free) / .06);
}

:root .button._violet {
  --btn-fg:           var(--violet);
  --btn-bg-hover:     hsl(var(--violet-free) / .12);
  --btn-fg-hover:     var(--violet);
  --btn-border:       hsl(var(--violet-free) / .25);
  --btn-border-hover: hsl(var(--violet-free) / .5);
}
:root .button._violet:not(._secondary):not(._quick):not(._danger):not(._inline):not(._navigation) {
  --btn-bg: hsl(var(--violet-free) / .06);
}

/* ── 12. Estados ── */

:root .button[disabled],
:root .button._disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* `._loading` — spinner inline, oculta o label durante request. */
:root .button._loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

:root .button._loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid var(--btn-fg);
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--btn-fg);
  animation: illusia-button-spin .9s linear infinite;
}

@keyframes illusia-button-spin {
  to { transform: rotate(360deg); }
}

/* ── 13. Pagination ──
 *
 * `.pagination .page-numbers` (numérica padrão WP/Fictioneer).
 * Continua como pattern paralelo — funciona junto do `.button._navigation`
 * (cobertura: page-numbers numérico + setas direcionais textuais).
 */

:root .pagination .page-numbers {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  letter-spacing: .06em;
  border-radius: var(--r-sm);
  transition:
    color var(--t-fast) var(--ease-std),
    background-color var(--t-fast) var(--ease-std),
    border-color var(--t-fast) var(--ease-std);
}

:root .pagination .page-numbers.current {
  background: var(--amber);
  color: var(--fg-inverted);
}

:root .pagination .page-numbers:not(.current):hover {
  color: var(--amber);
}

:root .pagination .page-numbers:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════
 * 14. LIGHT MODE — acentos perdem contraste em fundo claro (~96% L)
 *
 * Texto usa variantes -dim (38-44% L) para WCAG 4.5:1. Fundos
 * sólidos âmbar/crimson usam fg-100 (texto escuro).
 * ══════════════════════════════════════════════════════════════ */

:root[data-mode=light] {
  /* Fictioneer-system tokens — backcompat (Fictioneer parent CSS lê esses) */
  --button-primary-color: var(--fg-100);
  --button-primary-color-hover: var(--fg-100);
  --button-secondary-color-hover: var(--amber-dim);
  --button-warning-color: var(--crimson-dim);
  --button-warning-color-hover: var(--crimson-dim);
}

/* Local vars `--btn-*` precisam de override próprio em light mode.
 * CTA + `_danger._solid`: texto escuro sobre fundo âmbar/crimson. */
:root[data-mode=light] .button:where(:not(._secondary):not(._quick):not(._danger):not(._inline):not(._navigation)) {
  --btn-fg:       var(--fg-100);
  --btn-fg-hover: var(--fg-100);
}

:root[data-mode=light] .button._danger._solid {
  --btn-fg:       var(--fg-100);
  --btn-fg-hover: var(--fg-100);
}

/* `_secondary` hover: âmbar perde contraste, usa amber-dim */
:root[data-mode=light] .button._secondary {
  --btn-fg-hover: var(--amber-dim);
}

/* `_danger` ghost: crimson perde contraste, usa crimson-dim */
:root[data-mode=light] .button._danger:not(._solid) {
  --btn-fg:       var(--crimson-dim);
  --btn-fg-hover: var(--crimson-dim);
}

/* `_quick` hover: amber-dim em fundo claro */
:root[data-mode=light] .button._quick {
  --btn-fg-hover: var(--amber-dim);
}

/* `_navigation` hover: amber-dim em fundo claro */
:root[data-mode=light] .button._navigation {
  --btn-fg-hover: var(--amber-dim);
}

/* `_inline` link → amber-dim */
:root[data-mode=light] .button._inline,
:root[data-mode=light] .button._inline:hover {
  --btn-fg:       var(--amber-dim);
  --btn-fg-hover: var(--amber-dim);
}

/* Cor semântica em light mode: sage/teal/violet hover ficam dim */
:root[data-mode=light] .button._sage {
  --btn-fg:       hsl(var(--sage-free) / .82);
  --btn-fg-hover: hsl(var(--sage-free) / .82);
}
:root[data-mode=light] .button._teal {
  --btn-fg:       hsl(var(--teal-free) / .82);
  --btn-fg-hover: hsl(var(--teal-free) / .82);
}
:root[data-mode=light] .button._violet {
  --btn-fg:       hsl(var(--violet-free) / .82);
  --btn-fg-hover: hsl(var(--violet-free) / .82);
}

/* Pagination current */
:root[data-mode=light] .pagination .page-numbers.current {
  color: var(--fg-100);
}
:root[data-mode=light] .pagination .page-numbers:not(.current):hover {
  color: var(--amber-dim);
}

/* Focus outline */
:root[data-mode=light] .button:focus-visible,
:root[data-mode=light] .pagination .page-numbers:focus-visible {
  outline-color: var(--amber-dim);
}

/* ══════════════════════════════════════════════════════════════
 * 15. REDUCED MOTION
 * ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root .button,
  :root .button:hover {
    transform: none !important;
    transition: color var(--t-fast), background-color var(--t-fast),
                border-color var(--t-fast), opacity var(--t-fast);
  }

  :root .button._loading::after {
    animation: none;
  }
}