/* ══════════════════════════════════════════════════════════════
 * Illusia Stats — Sistema unificado de estatísticas
 *
 * Block canônico `.illusia-stat` usado em qualquer contexto que precise
 * exibir um par (valor numérico/curto + label descritiva). Substitui os
 * 5 padrões competidores que existiam antes (cards/strip/spotlight/
 * single-story/inline) com 4 tamanhos, 7 cores e 3 layouts diferentes.
 * Resolve a fragmentação reportada pelo usuário: "vamos acabar gerando
 * vários estilos levemente parecidos para partes que fazem a mesma
 * coisa, e isso é horrível".
 *
 * Markup canônico:
 *
 *   <div class="illusia-stats illusia-stats--<variant>">
 *     <div class="illusia-stat illusia-stat--<color>">
 *       <span class="illusia-stat__value">487</span>
 *       <span class="illusia-stat__label">Capítulos lidos</span>
 *     </div>
 *     ...
 *   </div>
 *
 * Variantes (`.illusia-stats--<variant>`):
 *
 *   inline    Gap natural, sem background. Default p/ headers compactos
 *             (single-story header, profile activity).
 *   strip     Cells contíguos com fundo glass — destaque visual de
 *             "tira de estatísticas" (homepage timeline, stories listing).
 *             Default colore o valor em ÂMBAR (vira protagonista visual).
 *   grid      auto-fit responsivo — dashboards de stats secundários.
 *
 * Cor default do valor é `--fg-100` (numeral neutro, blend com texto).
 * Strip vira âmbar via container scope. Cores semânticas via modificadores
 * no BLOCK (`.illusia-stat--sage`, `--rose`, `--teal`, etc.).
 *
 * IMPORTANTE — tipografia (revisada após v1.72.0):
 *  - Valor: Fira Code (var(--ff-mono)) weight 500, com features OpenType
 *    `tnum + zero + ss01`. Decisão pós-v1.72.0: Syne nos números ficou
 *    "blocky/genérico"; Fira Code 500 dá leitura de instrumento coerente
 *    com a identidade "Observatory" do tema e mantém o alinhamento
 *    tabular essencial pra strip/grid. Slashed zero (`zero`) e alternates
 *    (`ss01`) reforçam a distinção entre 0/O em listings densos.
 *  - Label: Fira Code mono uppercase, letter-spacing .1em — coerente
 *    com o vocabulário editorial Illusia pra metadados.
 *
 * @package Illusia Theme
 * @since   1.72.0
 * ══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens locais ──────────────────────────────────────────── */

.illusia-stat,
.illusia-stats {
  /* Sizing tokens — sobrescrevíveis per-instance via inline style/parent. */
  --stat-value-size: var(--text-lg);
  --stat-value-color: var(--fg-100);
  --stat-label-color: var(--fg-600);
  --stat-gap: var(--space-3xs);    /* entre value e label */
  --stats-gap: var(--space-md);    /* entre stats num container */
}

/* ── 2. Block ──────────────────────────────────────────────────── */

.illusia-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stat-gap);
  min-width: 0;
}

.illusia-stat__value {
  font-family: var(--ff-mono);
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
  font-weight: 500;
  font-size: var(--stat-value-size);
  color: var(--stat-value-color);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.illusia-stat__label {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--stat-label-color);
  line-height: 1;
}

/* Size modifiers — afetam só `--stat-value-size`. */
.illusia-stat--sm  { --stat-value-size: var(--text-base); }
.illusia-stat--xl  { --stat-value-size: var(--text-xl); }
.illusia-stat--2xl { --stat-value-size: var(--text-2xl); }

/* ── 3. Color modifiers ────────────────────────────────────────── */
/* Sobrescrevem `--stat-value-color`. Aplicar no block apenas quando a
   semântica da stat exige cor própria (ex: status). */
.illusia-stat--amber   { --stat-value-color: var(--amber); }
.illusia-stat--teal    { --stat-value-color: var(--teal); }
.illusia-stat--violet  { --stat-value-color: var(--violet); }
.illusia-stat--sage    { --stat-value-color: var(--sage); }
.illusia-stat--crimson { --stat-value-color: var(--crimson); }
.illusia-stat--neutral { --stat-value-color: var(--fg-100); }
.illusia-stat--bronze  { --stat-value-color: var(--bronze); }
.illusia-stat--rose    { --stat-value-color: var(--rose); }

/* ── 4. Containers ─────────────────────────────────────────────── */

.illusia-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stats-gap);
}

/* Variant inline — flex row natural, sem background, pra headers e
   contextos onde a stat acompanha outro conteúdo. Default. */
.illusia-stats--inline {
  --stats-gap: var(--space-lg) var(--space-xl);
}

/* Variant strip — cells contíguos com fundo glass, ornamentado.
   Para grupos de stats que viram protagonistas visuais (homepage
   timeline, listing pages). Valor vira âmbar por default. */
.illusia-stats--strip {
  --stats-gap: 1px;
  justify-content: center;
}
.illusia-stats--strip .illusia-stat {
  --stat-value-color: var(--amber);
  align-items: center;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  background: hsl(var(--bg-800-free) / .5);
}
.illusia-stats--strip .illusia-stat:first-child {
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.illusia-stats--strip .illusia-stat:last-child {
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.illusia-stats--strip .illusia-stat:only-child {
  border-radius: var(--r-lg);
}

/* Variant grid — auto-fit pra dashboards (vários stats em grade
   responsiva, sem prioridade visual entre eles). */
.illusia-stats--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  --stats-gap: var(--space-md);
}

/* ── 5. Light mode ─────────────────────────────────────────────── */
/* `--fg-100` modula automaticamente via lightness-offset, então o valor
   default fica correto nos 2 modos. Só `--amber` (cor hardcoded a 67%
   lightness pros 2 modos por design) precisa dim — atinge a strip e
   instâncias com modifier `--amber` explicito. Usa `:where()` pra ter
   especificidade 0 e deixar os color modifiers tradicionais vencerem. */
:where(:root[data-mode="light"]) .illusia-stats--strip .illusia-stat,
:where(:root[data-mode="light"]) .illusia-stat--amber {
  --stat-value-color: var(--amber-dim);
}

/* Strip light mode — superfície elevada branca (Observatory Claro).
 * v2.9.1: era bg-200/.4 (94% a 40% sobre página 97% = invisível);
 * o glass-bg branco + sombra fria devolve o strip como chip elevado. */
:root[data-mode="light"] .illusia-stats--strip .illusia-stat {
  background: var(--glass-bg);
  box-shadow: var(--shadow-sm);
}

/* ── 6. Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Nada a fazer — stats não têm animações próprias. Containers que
     animam stat entries devem respeitar prefers-reduced-motion. */
}