/**
 * ════════════════════════════════════════════════════════════════
 * ILLUSIA THEME — Design System & Fictioneer Variables Override
 * ════════════════════════════════════════════════════════════════
 *
 * Override das custom properties do tema pai Fictioneer (v5.34.4)
 * com os tokens do design system Illusia (DESIGN-DIRECTION.md).
 *
 * ESTRUTURA:
 * 1. Illusia Design Tokens (fonte de verdade)
 * 2. Fictioneer Control Variables (mapeadas para Illusia)
 * 3. Fictioneer Dark Mode — bg→void mapping + overrides genuínos
 * 4. Fictioneer fg colors → Illusia ink
 * 5. Scoped blocks (minimal, tags, toggles, etc.)
 * 6. Light Mode — Illusia hue overrides (bg→void, fg→ink)
 *
 * Carregado com prioridade 99 via wp_enqueue_scripts
 * ════════════════════════════════════════════════════════════════
 */

/** ══════════════════════════════════════════════════════════════
 * 1. ILLUSIA DESIGN TOKENS
 * ══════════════════════════════════════════════════════════════ */

:root {

  /* ── Variáveis de controle ──
   * Derivam das computed vars do Fictioneer para que o modal de
   * hue-rotate / darken / saturation continue funcionando.
   * O modal altera --lightness-offset, --saturation-offset, etc.
   * via inline style em :root; as computed vars (--darken, --saturation…)
   * reagem automaticamente.
   * NOTA: --hue-rotate é setado diretamente pelo modal JS como inline
   * style com valor `(Xdeg + var(--hue-offset))`, por isso usamos
   * --hue-rotate aqui (não --hue-offset, que nunca muda via modal).
   *
   * Fallback `, 1` defensivo (R3 — v1.89.0): se o Fictioneer parent não
   * definir a var no contexto (por ex. no editor ou em iframe isolado),
   * a fórmula continua resolvendo em vez de invalidar a cadeia inteira.
   *
   * Dark vs light coeficientes do --font-saturation (ver `--ink-*` na
   * seção 1 abaixo e `--fg-*` em light mode na seção 6): dark usa
   * coeficientes 10× menores (2-8%) que light (11-80%). Não é bug — é
   * decisão de design pro dark mode manter ink dessaturado por padrão.
   * O slider continua respondendo em ambos os modos, mas o delta visual
   * em dark é deliberadamente sutil. Não tente uniformizar coeficientes
   * sem revisar todo o sistema de cor.
   */
  --illusia-hue-offset: var(--hue-rotate, 0deg);
  --illusia-saturation: var(--saturation, 1);
  --illusia-darken: var(--darken, 1);
  --illusia-font-saturation: var(--font-saturation, 1);
  --illusia-font-lightness: var(--font-lightness, 1);

  /* ── Matizes base por família ── */
  --illusia-void-hue: 270deg;
  --illusia-ink-hue: 35deg;
  --illusia-amber-hue: 37deg;
  --illusia-teal-hue: 170deg;
  --illusia-crimson-hue: 0deg;
  --illusia-violet-hue: 260deg;
  --illusia-sage-hue: 134deg;
  --illusia-bronze-hue: 22deg;   /* v1.68.0 — duração/lealdade. v1.71.2: 28→22 (mais cobre/marrom, distinto de amber 37°) */
  --illusia-rose-hue: 340deg;    /* v1.68.0 — afeto/curtidas */

  /* ── Void — fundos (11 stops, paridade 1:1 com Fictioneer bg) ──
   * Lightness idêntica ao bg original; hue = Illusia void (270°).
   * Padrão clamp: min = base/2, max = 50 + base/2.
   * void-0 = bg-950 (darkest) … void-10 = bg-50 (lightest)
   */
  --void-0-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(60% * var(--illusia-saturation))  clamp(2%, 4% * var(--illusia-darken), 52%);
  --void-1-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(25% * var(--illusia-saturation))  clamp(4%, 8% * var(--illusia-darken), 54%);
  --void-2-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(15% * var(--illusia-saturation))  clamp(8.5%, 17% * var(--illusia-darken), 58.5%);
  --void-3-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(16% * var(--illusia-saturation))  clamp(10%, 20% * var(--illusia-darken), 60%);
  --void-4-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(14% * var(--illusia-saturation))  clamp(11.75%, 23.5% * var(--illusia-darken), 61.75%);
  --void-5-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(13% * var(--illusia-saturation))  clamp(13.25%, 26.5% * var(--illusia-darken), 63.25%);
  --void-6-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(13% * var(--illusia-saturation))  clamp(15.5%, 31% * var(--illusia-darken), 65.5%);
  --void-7-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(12% * var(--illusia-saturation))  clamp(19%, 38% * var(--illusia-darken), 69%);
  --void-8-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(12% * var(--illusia-saturation))  clamp(27%, 54% * var(--illusia-darken), 77%);
  --void-9-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(12% * var(--illusia-saturation))  clamp(34%, 68% * var(--illusia-darken), 84%);
  --void-10-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(12% * var(--illusia-saturation))  clamp(40%, 80% * var(--illusia-darken), 90%);

  --void-0:  hsl(var(--void-0-free));
  --void-1:  hsl(var(--void-1-free));
  --void-2:  hsl(var(--void-2-free));
  --void-3:  hsl(var(--void-3-free));
  --void-4:  hsl(var(--void-4-free));
  --void-5:  hsl(var(--void-5-free));
  --void-6:  hsl(var(--void-6-free));
  --void-7:  hsl(var(--void-7-free));
  --void-8:  hsl(var(--void-8-free));
  --void-9:  hsl(var(--void-9-free));
  --void-10: hsl(var(--void-10-free));

  /* ── Ink — textos (10 stops + tinted + inverted, paridade 1:1 com Fictioneer fg) ──
   * Lightness idêntica ao fg original; hue = Illusia ink (35°).
   * ink-0 = fg-100 (lightest) … ink-9 = fg-950 (darkest visible).
   * ink-inverted usa void-hue (270°) para texto escuro em fundo claro.
   * ink-0-free expõe o triplet HSL pra usos com alpha em contextos
   * locked-dark (glass sobre capas) — v2.8.1: era referenciado em 8
   * arquivos sem nunca ter sido definido (declarações descartadas).
   */
  --ink-0-free:
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(8% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(93% * var(--illusia-font-lightness, 1)), 100%);
  --ink-0: hsl(var(--ink-0-free));
  --ink-1: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(7% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(89% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-2: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(6% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(85% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-3: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(5% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(80.5% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-4: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(5% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(77% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-5: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(5% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(71% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-6: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(4% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(65% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-7: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(3% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(61% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-8: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(3% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(54% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-9: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(2% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(49% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-tinted: hsl(
    calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
    max(calc(6% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(76% * var(--illusia-font-lightness, 1)), 100%)
  );
  --ink-inverted: hsl(
    calc(var(--illusia-void-hue) + var(--illusia-hue-offset))
    max(calc(6% * (var(--illusia-font-saturation) + var(--illusia-saturation) - 1)), 0%)
    clamp(0%, calc(5% * var(--illusia-font-lightness, 1)), 100%)
  );

  /* ── Acentos — triplets -free + cor final ── */
  --amber-free:       calc(var(--illusia-amber-hue) + var(--illusia-hue-offset)) calc(73% * var(--illusia-saturation)) 67%;
  --amber-dim-free:   calc(var(--illusia-amber-hue) + var(--illusia-hue-offset)) calc(43% * var(--illusia-saturation)) 44%;
  --teal-free:        calc(var(--illusia-teal-hue) + var(--illusia-hue-offset)) calc(50% * var(--illusia-saturation)) 62%;
  --teal-dim-free:    calc(var(--illusia-teal-hue) + var(--illusia-hue-offset)) calc(41% * var(--illusia-saturation)) 38%;
  --crimson-free:     calc(var(--illusia-crimson-hue) + var(--illusia-hue-offset)) calc(58% * var(--illusia-saturation)) 60%;
  --crimson-dim-free: calc(var(--illusia-crimson-hue) + var(--illusia-hue-offset)) calc(41% * var(--illusia-saturation)) 38%;
  --violet-free:      calc(var(--illusia-violet-hue) + var(--illusia-hue-offset)) calc(50% * var(--illusia-saturation)) 66%;
  --violet-dim-free:  calc(var(--illusia-violet-hue) + var(--illusia-hue-offset)) calc(33% * var(--illusia-saturation)) 38%;
  --sage-free:        calc(var(--illusia-sage-hue) + var(--illusia-hue-offset)) calc(35% * var(--illusia-saturation)) 61%;
  --sage-dim-free:    calc(var(--illusia-sage-hue) + var(--illusia-hue-offset)) calc(29% * var(--illusia-saturation)) 32%;
  /* v1.68.0 — acentos pro sistema de badges (Lealdade + Fandom-likes)
   * v1.71.2: bronze 55%/58% → 50%/48% (mais escuro/dessaturado, distinto de amber dourado) */
  --bronze-free:      calc(var(--illusia-bronze-hue) + var(--illusia-hue-offset)) calc(50% * var(--illusia-saturation)) 48%;
  --rose-free:        calc(var(--illusia-rose-hue) + var(--illusia-hue-offset)) calc(60% * var(--illusia-saturation)) 68%;

  --amber:       hsl(var(--amber-free));
  --amber-dim:   hsl(var(--amber-dim-free));
  --teal:        hsl(var(--teal-free));
  --teal-dim:    hsl(var(--teal-dim-free));
  --crimson:     hsl(var(--crimson-free));
  --crimson-dim: hsl(var(--crimson-dim-free));
  --violet:      hsl(var(--violet-free));
  --violet-dim:  hsl(var(--violet-dim-free));
  --sage:        hsl(var(--sage-free));
  --sage-dim:    hsl(var(--sage-dim-free));
  --bronze:      hsl(var(--bronze-free));
  --rose:        hsl(var(--rose-free));

  /* ── Glows & Halos ── */
  --amber-glow:  hsl(var(--amber-free) / .12);
  --amber-halo:  hsl(var(--amber-free) / .06);
  --teal-glow:   hsl(var(--teal-free) / .1);

  /* ── Bordas semânticas ── */
  --illusia-border-base: calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
                         calc(100% * var(--illusia-saturation)) 91%;

  --border-0:      hsl(var(--illusia-border-base) / .04);
  --border-1:      hsl(var(--illusia-border-base) / .08);
  --border-2:      hsl(var(--illusia-border-base) / .13);
  --border-amber:  hsl(var(--amber-free) / .22);
  --border-active: hsl(var(--amber-free) / .45);

  /* ── Glass ── */
  --glass-bg:     hsl(var(--bg-900-free) / .7);
  --glass-blur:   blur(clamp(8px, 1.5vw, 16px));
  --glass-border: hsl(var(--illusia-border-base) / .08);

  /* ── Sombras ── */
  --shadow-sm:  0 1px  4px  hsl(0 0% 0% / .15);
  --shadow-md:  0 2px  8px  hsl(0 0% 0% / .2);
  --shadow-lg:  0 4px  20px hsl(0 0% 0% / .25);
  --shadow-xl:  0 8px  40px hsl(0 0% 0% / .35);

  /* ── Espaçamento (clamp fluido) ── */
  --space-4xs: clamp(.0625rem, .125vw, .125rem);
  --space-5xs: clamp(.03125rem, .0625vw, .0625rem);
  --space-3xs: clamp(.125rem, .25vw, .25rem);
  --space-2xs: clamp(.25rem,  .5vw,  .375rem);
  --space-xs:  clamp(.375rem, .75vw, .625rem);
  --space-sm:  clamp(.5rem,   1.2vw, .875rem);
  --space-md:  clamp(.875rem, 2vw,   1.25rem);
  --space-lg:  clamp(1.25rem, 3vw,   2rem);
  --space-xl:  clamp(1.75rem, 4.5vw, 3rem);
  --space-2xl: clamp(2.5rem,  6vw,   4.5rem);
  --space-3xl: clamp(3rem,    8vw,   6rem);
  --space-4xl: clamp(4rem,   10vw,  8rem);
  --space-5xl: clamp(6rem,   12vw,  10rem);

  /* Offset (negativo) da overline de catálogo da single story em direção ao
   * título — neutraliza parte do gap do flex container do meta pra a overline
   * "abraçar" o título. Ajuste central aqui (escala com o spacing). */
  --illusia-overline-offset: calc(var(--space-2xs) * -1);


  /* ── Tipografia — escala fluida ── */
  --text-3xs: clamp(.5rem,  .9vw,  .58rem);
  --text-2xs: clamp(.58rem, 1.1vw, .68rem);
  --text-xs:  clamp(.68rem, 1.3vw, .78rem);
  --text-sm:  clamp(.78rem, 1.5vw, .88rem);
  --text-base:clamp(.88rem, 1.7vw, 1rem);
  --text-md:  clamp(1rem,   2vw,   1.15rem);
  --text-lg:  clamp(1.15rem,2.4vw, 1.45rem);
  --text-xl:  clamp(1.45rem,3.2vw, 1.9rem);
  --text-2xl: clamp(2rem,   5vw,   3.2rem);
  --text-3xl: clamp(2.8rem, 7vw,   5rem);

  /* ── Raio de borda (clamp fluido) ── */
  --r-xs: clamp(2px,  .3vw, 3px);
  --r-sm: clamp(3px,  .5vw, 5px);
  --r-md: clamp(6px,  .9vw, 9px);
  --r-lg: clamp(9px,  1.4vw,14px);
  --r-xl: clamp(12px, 1.8vw,20px);

  /* ── Famílias tipográficas ──
   *
   * `--ff-body` é alias de `--ff-ui` (Syne). Preserva a semântica
   * de "corpo de texto" nos consumidores (illusia-profile.css,
   * illusia-rankings-page.css) sem amarrá-los ao token de UI —
   * se a fonte de corpo divergir do UI no futuro, troca-se aqui.
   * Resolução do bug v1.74.6 (`--ff-body` undefined → fallback ao
   * body do Fictioneer parent).
   */
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-ui:      'Syne', sans-serif;
  --ff-mono:    'Fira Code', monospace;
  --ff-body:    var(--ff-ui);

  /* ── Easing ── */
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --ease-std:  cubic-bezier(.4,0,.2,1);

  /* ── Durações ── */
  --t-fast: 110ms;
  --t-mid:  240ms;
  --t-slow: 420ms;

  /* ── Layout ── */
  --max-w: min(1100px, 94vw);

  /* ── Hero banner ── */
  --hero-height: clamp(260px, 38vw, 450px);
  --hero-grain-opacity: .08;
  --hero-blur-fallback: blur(22px);
  --hero-selector-h: 72px;
  --hero-selector-h-mobile: 62px;
  --hero-cover-h: clamp(160px, 28vw, 240px);
  --hero-cover-h-mobile: clamp(150px, 30vw, 200px);
  --hero-cover-h-small: clamp(160px, 35vw, 200px);

  /* ── Timeline cover (3:4 proportion) ── */
  --tl-cover-w: clamp(2.5rem, 4vw, 2.953rem);  /* ~40→47.25px */
  --tl-cover-h: calc(var(--tl-cover-w) * 4 / 3); /* mantém 3:4 */

  /* ── Letter-spacing semântico ── */
  --ls-tight: -.03em;
  --ls-wide: .06em;

  /* ── Status badge icons (unicode FA — override Fictioneer defaults) ── */
  --icon-status-ongoing:   '\f5ad'; /* fa-pen-nib */
  --icon-status-completed: '\f091'; /* fa-trophy */
  --icon-status-oneshot:   '\f0e7'; /* fa-bolt */
  --icon-status-hiatus:    '\f04c'; /* fa-pause */
  --icon-status-canceled:  '\f00d'; /* fa-xmark */

  /* ── Status badge colors (usados em cards e single story) ── */
  --status-ongoing-color:    var(--teal);
  --status-ongoing-bg:       hsl(var(--teal-free) / .06);
  --status-ongoing-border:   hsl(var(--teal-free) / .25);

  --status-completed-color:  var(--sage);
  --status-completed-bg:     hsl(var(--sage-free) / .06);
  --status-completed-border: hsl(var(--sage-free) / .25);

  --status-hiatus-color:     var(--amber);
  --status-hiatus-bg:        hsl(var(--amber-free) / .06);
  --status-hiatus-border:    hsl(var(--amber-free) / .25);

  --status-oneshot-color:    var(--violet);
  --status-oneshot-bg:       hsl(var(--violet-free) / .06);
  --status-oneshot-border:   hsl(var(--violet-free) / .25);

  --status-canceled-color:   var(--crimson);
  --status-canceled-bg:      hsl(var(--crimson-free) / .06);
  --status-canceled-border:  hsl(var(--crimson-free) / .25);

  /* ── Rating badge colors ── */
  --rating-everyone-color:   var(--sage);
  --rating-everyone-bg:      hsl(var(--sage-free) / .06);
  --rating-everyone-border:  hsl(var(--sage-free) / .25);

  --rating-teen-color:       var(--amber);
  --rating-teen-bg:          hsl(var(--amber-free) / .06);
  --rating-teen-border:      hsl(var(--amber-free) / .25);

  --rating-mature-color:     var(--crimson);
  --rating-mature-bg:        hsl(var(--crimson-free) / .06);
  --rating-mature-border:    hsl(var(--crimson-free) / .25);

}

/* ── Tipografia — piso mobile (v2.26.22) ──
 * O termo vw dos clamps da escala acima só ultrapassa o mínimo a
 * partir de ~830px de viewport: em celular TODOS os tokens resolvem
 * no piso do clamp (8–14px) — o menor texto do site justo na menor
 * tela. Este override levanta o piso em ≤767px preservando a
 * hierarquia entre os degraus; desktop segue nos clamps fluidos.
 * A leitura de capítulo não passa por aqui (usa --fs-* do
 * Fictioneer, controlada pelo leitor). */
@media (max-width: 767px) {
  :root {
    --text-3xs:  .625rem;  /*  8px  → 10px */
    --text-2xs:  .6875rem; /*  9.3px → 11px */
    --text-xs:   .75rem;   /* 10.9px → 12px */
    --text-sm:   .8125rem; /* 12.5px → 13px */
    --text-base: .9375rem; /* 14.1px → 15px */
  }
}

/* ══════════════════════════════════════════════════════════════
 * 3. FICTIONEER DARK MODE COLORS & COMPONENTS
 * ══════════════════════════════════════════════════════════════ */

:root {
  --theme-color-base: 270 60 4;

  /* ── Core backgrounds (darker than Fictioneer) ── */
  --body-bg-color: var(--bg-950);
  --site-bg-color: var(--bg-950);
  --page-bg-color: var(--bg-900);
  --card-bg-color: var(--bg-800);
  --card-footer-bg-color: var(--bg-950);
  --card-overlay-bg-color: var(--bg-950);
  --modal-bg-color: var(--bg-800);
  --navigation-background: var(--bg-950);
  --navigation-submenu-background: var(--bg-700);
  --navigation-item-background-hover: var(--bg-700);
  --navigation-subitem-background-hover: var(--bg-800);
  --mobile-menu-background: var(--bg-900);
  --mobile-menu-advanced-background: var(--bg-950);
  --micro-menu-background: var(--bg-950);
  --bg-isolated-footer: var(--bg-950);
  --scrollbar-background: var(--bg-950);

  /* ── Glass backgrounds ── */
  --code-background: hsl(var(--bg-950-free) / .6);
  --code-background-inline: hsl(var(--bg-950-free) / .6);
  --input-background: hsl(var(--bg-950-free) / .6);

  /* ── Color identity swaps ── */
  --primary-400: hsl(var(--amber-free));
  --primary-500: hsl(var(--amber-free));
  --primary-600: hsl(var(--amber-dim-free));
  --green-400: hsl(var(--sage-free));
  --green-500: hsl(var(--sage-free));
  --green-600: hsl(var(--sage-dim-free));
  --red-400: hsl(var(--crimson-free));
  --red-500: hsl(var(--crimson-free));
  --red-600: hsl(var(--crimson-dim-free));
  --ins-background: var(--sage);
  --del-background: var(--crimson);
  --tax-cloud-current: var(--amber);
  --litrpg-ins: var(--sage);
  --litrpg-del: var(--crimson);

  /* ── bg-* → void mapping (core bridge) ── */
  --bg-50-free:  var(--void-10-free);
  --bg-100-free: var(--void-9-free);
  --bg-200-free: var(--void-8-free);
  --bg-300-free: var(--void-7-free);
  --bg-400-free: var(--void-6-free);
  --bg-500-free: var(--void-5-free);
  --bg-600-free: var(--void-4-free);
  --bg-700-free: var(--void-3-free);
  --bg-800-free: var(--void-2-free);
  --bg-900-free: var(--void-1-free);
  --bg-950-free: var(--void-0-free);
  --bg-50:  hsl(var(--bg-50-free));
  --bg-100: hsl(var(--bg-100-free));
  --bg-200: hsl(var(--bg-200-free));
  --bg-300: hsl(var(--bg-300-free));
  --bg-400: hsl(var(--bg-400-free));
  --bg-500: hsl(var(--bg-500-free));
  --bg-600: hsl(var(--bg-600-free));
  --bg-700: hsl(var(--bg-700-free));
  --bg-800: hsl(var(--bg-800-free));
  --bg-900: hsl(var(--bg-900-free));
  --bg-950: hsl(var(--bg-950-free));

  /* ── Layout spacing → Illusia tokens ── */
  --layout-spacing-vertical: var(--space-xl);
  --layout-spacing-horizontal: var(--space-xl);
  --layout-spacing-horizontal-small: var(--space-md);
  --layout-border-radius-large: var(--r-sm);
  --layout-border-radius-small: var(--r-xs);
  --layout-link-color: inherit;
  --layout-link-color-hover: inherit;
  --layout-lineart-color: var(--border-1);
  --layout-hr-border: 2px solid var(--hr-color);
  --layout-hr-border-dashed: 2px dashed var(--hr-color);
  --layout-widget-spacing: var(--space-lg);
  --layout-widget-spacing-heading-multiplier: .5;
  --block-spacing-20: var(--space-xs);
  --block-spacing-30: var(--space-md);
  --block-spacing-40: var(--space-lg);
  --block-spacing-50: var(--space-xl);
  --block-spacing-60: var(--space-2xl);
  --block-spacing-70: var(--space-3xl);
  --block-spacing-80: 8rem;
  --hr-color: var(--layout-lineart-color);
  --hr-size: 2px;
  --hr-spacing: max(2.5rem, calc(var(--paragraph-spacing) + 1rem));
  --hr-dots-color: var(--bg-200);

  /* ── Block heading sizes → Illusia tokens ── */
  --block-fs-h1: var(--text-2xl);
  --block-fs-h2: var(--text-xl);
  --block-fs-h3: var(--text-lg);
  --block-fs-h4: var(--text-md);
  --block-fs-h5: var(--text-base);
  --block-fs-h6: var(--fs-s);

  /* ── Links → amber ── */
  --alert-highlight-color: var(--amber);
  --inline-link-color: var(--amber);
  --inline-link-color-hover: var(--amber);
  --inline-link-color-visited: var(--amber-dim);
  --inline-link-text-decoration: underline transparent solid .05em;
  --inline-link-text-decoration-hover: underline currentColor solid .05em;
  --widget-link-color: inherit;
  --widget-link-color-hover: var(--fg-100);
  --footnote-link-color: var(--amber);
  --footnote-link-color-hover: var(--amber-dim);

  /* ── Cards ── */
  --card-label-background: var(--amber-dim);

  /* ── Bookmarks → Illusia accents ── */
  --bookmark-color-beta: hsl(var(--crimson-free));
  --bookmark-color-gamma: hsl(var(--teal-free));

  /* ── Badges → Illusia accents ── */
  --badge-supporter-background: hsl(var(--crimson-free));
  --badge-moderator-background: hsl(210 30% 45%);
  --badge-admin-background: hsl(var(--violet-free));
  --badge-author-background: var(--amber-dim);

  /* ── Misc ── */
  --transition-duration: var(--t-fast);
  --text-selection-background: hsl(var(--amber-free) / .2);
  --scrollbar-thumb: var(--amber-dim);
  --scrollbar-box-shadow: none
}

/* ══════════════════════════════════════════════════════════════
 * 4. FICTIONEER fg COLORS → Illusia Ink Hue
 * ══════════════════════════════════════════════════════════════ */

:root, :root .chapter-formatting {
  /* Mapping 1:1 — cada fg-X = ink correspondente */
  --fg-100: var(--ink-0);        /* → ink-0  (93% L) */
  --fg-200: var(--ink-1);        /* → ink-1  (89% L) */
  --fg-300: var(--ink-2);        /* → ink-2  (85% L) */
  --fg-400: var(--ink-3);        /* → ink-3  (80.5% L) */
  --fg-500: var(--ink-4);        /* → ink-4  (77% L) */
  --fg-600: var(--ink-5);        /* → ink-5  (71% L) */
  --fg-700: var(--ink-6);        /* → ink-6  (65% L) */
  --fg-800: var(--ink-7);        /* → ink-7  (61% L) */
  --fg-900: var(--ink-8);        /* → ink-8  (54% L) */
  --fg-950: var(--ink-9);        /* → ink-9  (49% L) */
  --fg-tinted: var(--ink-tinted);    /* → ink-tinted  (76% L) */
  --fg-inverted: var(--ink-inverted) /* → ink-inverted (5% L, void-hue) */
}

/* ══════════════════════════════════════════════════════════════
 * 5. SCOPED BLOCKS
 * ══════════════════════════════════════════════════════════════ */

:root .consent-banner {
  --consent-banner-background: var(--bg-950)
}
:root .selected-paragraph {
  --paragraph-selection-background: hsl(var(--amber-free) / .1);
  --paragraph-tools-filter: drop-shadow(0 1px 4px hsl(0 0% 0% / .33));
  --button-bookmark-background-active: var(--amber)
}
:root .tts-interface {
  --tts-background: var(--bg-950);
  --tts-button-active-background: var(--amber);
  --tts-button-active-text: var(--fg-inverted)
}
:root .current-reading {
  --tts-current-reading-background: hsl(0 0% 100% / .05)
}
:root.minimal {
  --site-title-heading-color: var(--fg-100);
  --site-title-tagline-color: var(--fg-100);
  --site-title-text-shadow: none;
  --text-shadow: none;
  --mobile-menu-text-shadow: none;
  --paragraph-tools-filter: none;
  --content-li-background: var(--minimal-content-li-background, var(--content-li-background-full));
  --story-blog-li-background: var(--minimal-content-li-background, var(--content-li-background-full));
  --chapter-li-background: var(--minimal-content-li-background, var(--content-li-background-full));
  --card-content-li-background: var(--minimal-card-content-li-background, var(--card-content-li-background-full));
  --embed-box-shadow: var(--minimal-box-shadow);
  --box-shadow-xs: var(--minimal-box-shadow);
  --box-shadow-s: var(--minimal-box-shadow);
  --box-shadow: var(--minimal-box-shadow);
  --box-shadow-m: var(--minimal-box-shadow);
  --box-shadow-l: var(--minimal-box-shadow);
  --box-shadow-xl: var(--minimal-box-shadow);
  --drop-shadow-xs: var(--minimal-drop-shadow);
  --drop-shadow-s: var(--minimal-drop-shadow);
  --drop-shadow: var(--minimal-drop-shadow);
  --drop-shadow-m: var(--minimal-drop-shadow);
  --drop-shadow-l: var(--minimal-drop-shadow);
  --drop-shadow-xl: var(--minimal-drop-shadow);
  --page-box-shadow: var(--minimal-page-box-shadow);
  --page-drop-shadow: var(--minimal-page-drop-shadow);
  --card-box-shadow: 0 0 0 1px var(--card-frame-border-color, hsl(0 0% 0% / .2));
  --card-drop-shadow: 0 0 1px var(--card-frame-border-color, hsl(0 0% 0% / .3));
  --card-style-border-width: 1px
}
:root[data-mode=dark] body {
  --wp--preset--color--vivid-red: var(--crimson);
  --wp--preset--color--vivid-cyan-blue: hsl(var(--teal-free));
  --wp--preset--color--vivid-purple: hsl(var(--violet-free))
}
:root[data-mode=dark] body ::selection {
  background-color: var(--text-selection-background);
  color: var(--text-selection-color);
  text-shadow: none
}

/* ══════════════════════════════════════════════════════════════
 * 6. LIGHT MODE — "Observatory Claro" (v2.9.0)
 *
 * O Fictioneer define o light mode completo com hue 210° (azul).
 * Até v2.8.1 o light era o dark invertido; v2.9.0 o desenha de
 * verdade (direção B do docs/light-mode-redesign-mockup.html):
 * - Mantém o frio 270° do void — "o observatório de manhã"
 * - Texto/bordas friam pro hue 268° (tinta 35° era herança do dark)
 * - Superfície elevada: cards BRANCOS (bg-50) sobre página 97%
 * - Acentos -dim como padrão (os do dark emitem, não imprimem)
 * - Profundidade por sombra fria, não por glow
 * - Amber não flipa: fill de CTA + assinatura contínua entre modos
 * ══════════════════════════════════════════════════════════════ */

:root[data-mode=light] {
  --theme-color-base: 270 22 96;

  /* ── Grain reduzido — blend overlay lê mais forte em fundos claros ── */
  --hero-grain-opacity: .04;

  /* ── Texto fria pro hue do void (fg-*, ink-* e border-base derivam) ── */
  --illusia-ink-hue: 268deg;

  /* ── Core backgrounds — página 97%, superfícies elevadas brancas ── */
  --body-bg-color: var(--bg-100);
  --site-bg-color: var(--bg-100);
  --page-bg-color: var(--bg-100);
  --card-bg-color: var(--bg-50);
  --card-footer-bg-color: var(--bg-100);
  --card-overlay-bg-color: var(--bg-50);
  --modal-bg-color: var(--bg-50);
  --navigation-background: var(--bg-100);
  --navigation-submenu-background: var(--bg-50);
  --navigation-item-background-hover: var(--bg-200);
  --navigation-subitem-background-hover: var(--bg-200);
  --mobile-menu-background: var(--bg-100);
  --mobile-menu-advanced-background: var(--bg-200);
  --micro-menu-background: var(--bg-50);
  --bg-isolated-footer: var(--bg-100);
  --scrollbar-background: var(--bg-100);

  /* ── Glass inputs (translúcido claro) ── */
  --code-background: hsl(var(--bg-200-free) / .6);
  --code-background-inline: hsl(var(--bg-200-free) / .6);
  --input-background: hsl(var(--bg-200-free) / .5);

  /* ── Color identity swaps ── */
  --primary-400: var(--amber);
  --primary-500: var(--amber);
  --primary-600: var(--amber-dim);
  --green-400: var(--sage);
  --green-500: var(--sage);
  --green-600: var(--sage-dim);
  --red-400: var(--crimson);
  --red-500: var(--crimson);
  --red-600: var(--crimson-dim);

  /* ── bg-*-free: Illusia void hue, escala B (Observatory Claro) ──
   * bg-50 = superfície elevada (cards/glass, quase branco com tinta);
   * bg-100 = página (97%, violeta-cinza perceptível);
   * bg-200+ = inputs/hovers/bandas, escurecendo monotônico. */
  --bg-50-free:  calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(30% * var(--saturation)) clamp(49.75%, 99.5% * var(--darken), 99.75%);
  --bg-100-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(22% * var(--saturation)) clamp(48.5%, 97% * var(--darken), 98.5%);
  --bg-200-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(18% * var(--saturation)) clamp(47%, 94% * var(--darken), 97%);
  --bg-300-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(16% * var(--saturation)) clamp(45.5%, 91% * var(--darken), 95.5%);
  --bg-400-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(11% * var(--saturation)) clamp(42%, 84% * var(--darken), 92%);
  --bg-500-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(11% * var(--saturation)) clamp(37.5%, 75% * var(--darken), 87.5%);
  --bg-600-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(9% * var(--saturation)) clamp(23%, 46% * var(--darken), 73%);
  --bg-700-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(14% * var(--saturation)) clamp(17%, 34% * var(--darken), 67%);
  --bg-800-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(28% * var(--saturation)) clamp(8.5%, 17% * var(--darken), 58.5%);
  --bg-900-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(39% * var(--saturation)) clamp(5.5%, 11% * var(--darken), 55.5%);
  --bg-950-free: calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) calc(71% * var(--saturation)) clamp(2%, 4% * var(--darken), 52%);

  /* ── Acentos → -dim (Observatory Claro) ──
   * Os acentos do dark (60-67% L) são calibrados pra EMITIR sobre o
   * void; sobre fundo claro lavam (~2:1). Flipar os triplets -free
   * escurece em cascata tudo que deriva deles (cores, bgs, borders,
   * glows, rank colors). Amber NÃO flipa (fill de CTA, não texto);
   * usos de texto re-apontam pra --amber-dim individualmente. */
  --teal-free:    var(--teal-dim-free);
  --violet-free:  var(--violet-dim-free);
  --sage-free:    var(--sage-dim-free);
  --crimson-free: var(--crimson-dim-free);

  /* ── Status/rating badges — HÍBRIDO claro (decisão live-review v2.9.20):
   * o glass translúcido (.06–.10 bg) que EMITE sobre o void lava sobre
   * fundo claro. No claro estes badges (poucos, semânticos) viram
   * PREENCHIMENTO SÓLIDO -dim + texto claro (--ink-0), como os badges do
   * hero/spotlight da homepage. teal/sage/violet/crimson já = -dim no claro
   * (flip -free na seção acima); amber não flipa → --amber-dim explícito.
   * Ponto ÚNICO: todo badge de status/rating do site herda isto. ── */
  --status-ongoing-color:    var(--ink-0);
  --status-ongoing-bg:       var(--teal);
  --status-ongoing-border:   transparent;
  --status-completed-color:  var(--ink-0);
  --status-completed-bg:     var(--sage);
  --status-completed-border: transparent;
  --status-hiatus-color:     var(--ink-0);
  --status-hiatus-bg:        var(--amber-dim);
  --status-hiatus-border:    transparent;
  --status-oneshot-color:    var(--ink-0);
  --status-oneshot-bg:       var(--violet);
  --status-oneshot-border:   transparent;
  --status-canceled-color:   var(--ink-0);
  --status-canceled-bg:      var(--crimson);
  --status-canceled-border:  transparent;
  --rating-everyone-color:   var(--ink-0);
  --rating-everyone-bg:      var(--sage);
  --rating-everyone-border:  transparent;
  --rating-teen-color:       var(--ink-0);
  --rating-teen-bg:          var(--amber-dim);
  --rating-teen-border:      transparent;
  --rating-mature-color:     var(--ink-0);
  --rating-mature-bg:        var(--crimson);
  --rating-mature-border:    transparent;

  /* ── Accent overrides ── */
  --ins-background: var(--sage);
  --del-background: var(--crimson);
  --inline-link-color: var(--amber-dim);
  --inline-link-color-visited: var(--amber-dim);
  --inline-link-color-hover: var(--amber-dim);
  --footnote-link-color: var(--amber-dim);
  --footnote-link-color-hover: var(--amber-dim);
  --tax-cloud-current: var(--amber-dim);
  --widget-link-color-hover: var(--amber-dim);

  /* ── Bookmarks → cores mais diferenciadas no claro ── */
  --bookmark-color-alpha: var(--amber-dim);
  --bookmark-color-beta: var(--crimson-dim);
  --bookmark-color-gamma: hsl(var(--teal-free));

  /* ── Glass → frosted branco (superfície elevada sobre página 97%) ── */
  --glass-bg:     hsl(var(--bg-50-free) / .85);
  --glass-border: hsl(var(--illusia-border-base) / .10);

  /* ── Border base invertida para light mode ──
   * Dark mode: creme claro (91% L) + opacidade baixa → sutil em fundo escuro
   * Light mode: tom escuro frio (268° via ink-hue flipado, 15% L) +
   * opacidades maiores — "estrutura firme" da direção B.
   */
  --illusia-border-base: calc(var(--illusia-ink-hue) + var(--illusia-hue-offset))
                         calc(25% * var(--illusia-saturation)) 15%;
  --border-0:      hsl(var(--illusia-border-base) / .06);
  --border-1:      hsl(var(--illusia-border-base) / .14);
  --border-2:      hsl(var(--illusia-border-base) / .22);
  --border-amber:  hsl(var(--amber-dim-free) / .45);
  --border-active: hsl(var(--amber-dim-free) / .75);

  /* ── Sombras light — tinta fria como linguagem de profundidade ──
   * No claro o glow não funciona; a elevação vem de sombra violeta
   * fria + superfície mais branca que a página. */
  --illusia-cool-shadow-free: calc(var(--illusia-void-hue) - 2deg + var(--illusia-hue-offset))
                              calc(40% * var(--illusia-saturation)) 22%;
  --shadow-sm:  0 1px  3px  hsl(var(--illusia-cool-shadow-free) / .10);
  --shadow-md:  0 2px  8px  hsl(var(--illusia-cool-shadow-free) / .12);
  --shadow-lg:  0 4px  20px hsl(var(--illusia-cool-shadow-free) / .14);
  --shadow-xl:  0 8px  40px hsl(var(--illusia-cool-shadow-free) / .18)
}

/* fg-* light mode: Fictioneer sat/lightness, Illusia ink hue */
:root[data-mode=light], :root[data-mode=light] .chapter-formatting {
  --fg-100:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(80% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(2% * var(--font-lightness, 1)), 100%));
  --fg-200:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(71% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(4% * var(--font-lightness, 1)), 100%));
  --fg-300:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(55% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(7% * var(--font-lightness, 1)), 100%));
  --fg-400:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(39% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(11% * var(--font-lightness, 1)), 100%));
  --fg-500:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(26% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(16% * var(--font-lightness, 1)), 100%));
  --fg-600:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(19% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(27% * var(--font-lightness, 1)), 100%));
  --fg-700:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(11% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(39% * var(--font-lightness, 1)), 100%));
  --fg-800:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(9% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(46% * var(--font-lightness, 1)), 100%));
  --fg-900:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(11% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(58% * var(--font-lightness, 1)), 100%));
  --fg-950:  hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(11% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(65% * var(--font-lightness, 1)), 100%));
  --fg-tinted: hsl(calc(var(--illusia-ink-hue) + var(--illusia-hue-offset)) max(calc(33% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(17% * var(--font-lightness, 1)), 100%));
  --fg-inverted: hsl(calc(var(--illusia-void-hue) + var(--illusia-hue-offset)) max(calc(20% * (var(--font-saturation, 1) + var(--saturation, 1) - 1)), 0%) clamp(0%, calc(99% * var(--font-lightness, 1)), 100%))
}

/* ── Light mode scoped — selected paragraph ── */
:root[data-mode=light] .selected-paragraph {
  --paragraph-selection-background: hsl(var(--amber-free) / .2);
  --paragraph-tools-filter: drop-shadow(0 -3px 6px hsl(0 0% 0% / .08))
}

/* ── Utility: sr-only (visually hidden, acessível) ─────────────────
   v2.5.0 (S14): consolida 5 blocos duplicados (char-carousel status,
   search modal status, quick-search status, danger-zone heading,
   password-form timer-status) numa utility global única.
   Cobre também `.screen-reader-text`: o Fictioneer pai só define
   `width:1px !important` (amendment) e o WP core só a estende dentro
   do #wpadminbar — a regra completa NÃO existia no frontend pra
   visitantes anônimos. !important deliberado: utility de esconder
   nunca deve perder pra cascade de componente. */
.illusia-sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}