/* =========================================================================
   Guerra das Tempestades — base: tokens, reset e tipografia
   Paleta de pedra e âmbar. Nada de tela azul: o claro é pergaminho, o
   escuro é ardósia quente, e a luz das tempestades entra só como destaque.
   ========================================================================= */

:root{
  /* --- neutros (claro) ---
     Pedra, não pergaminho: Roshar é rocha lascada e tempestade. O viés
     verde-acinzentado tira o tom de papel velho e faz o âmbar saltar. */
  --papel:        #eef0ea;
  --papel-2:      #e4e7df;
  --superficie:   #fafbf7;
  --superficie-2: #e8ebe3;
  --borda:        #d1d6ca;
  --borda-forte:  #b2b9a9;
  --tinta:        #1d211c;
  --tinta-2:      #4b524a;
  --tinta-3:      #6a7168;

  /* --- acentos --- */
  --ambar:        #a05f10;   /* esferas infundidas */
  --ambar-claro:  #d99a3c;
  --ambar-fundo:  #f6ead2;
  --luz:          #0f6b63;   /* luz das tempestades */
  --luz-clara:    #2f9c93;
  --luz-fundo:    #dfeeeb;
  --granada:      #a3323f;
  --granada-fundo:#f8e4e4;
  --verde:        #3f7d4e;

  /* --- os três reinos, usados nas perícias e defesas --- */
  --fisico:       #b1552f;
  --cognitivo:    #2c6ba8;
  --espiritual:   #7a4fa3;

  /* --- forma --- */
  --r-p: 8px; --r-m: 12px; --r-g: 18px;
  --sombra-1: 0 1px 2px rgba(38,33,27,.06), 0 2px 8px rgba(38,33,27,.05);
  --sombra-2: 0 2px 6px rgba(38,33,27,.08), 0 12px 28px rgba(38,33,27,.09);
  --sombra-3: 0 8px 20px rgba(38,33,27,.12), 0 24px 60px rgba(38,33,27,.16);

  --largura: 1140px;
  --transicao: 160ms cubic-bezier(.2,.7,.3,1);

  /* fontes: o serif dá cara de livro, o sans segura a interface */
  --f-titulo: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  color-scheme: light;
}

/* O tema escuro é ardósia quente, não azul-marinho. */
:root[data-tema="escuro"]{
  --papel:        #17151a;
  --papel-2:      #100e13;
  --superficie:   #201d25;
  --superficie-2: #282430;
  --borda:        #363040;
  --borda-forte:  #4a4356;
  --tinta:        #ece6df;
  --tinta-2:      #b3a99c;
  --tinta-3:      #948b80;

  --ambar:        #e3a44f;
  --ambar-claro:  #f0c078;
  --ambar-fundo:  #33260f;
  --luz:          #4fc4b8;
  --luz-clara:    #7ad9cf;
  --luz-fundo:    #10322f;
  --granada:      #e0707c;
  --granada-fundo:#3a1b20;
  --verde:        #6bbd7f;

  --fisico:       #e08a63;
  --cognitivo:    #79aee6;
  --espiritual:   #b48ede;

  --sombra-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --sombra-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
  --sombra-3: 0 8px 20px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--f-titulo); font-weight:600; line-height:1.2; margin:0; letter-spacing:-.01em }
h1{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3.4rem) }
h2{ font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem) }
h3{ font-size:1.2rem }
p{ margin:0 0 1em }
a{ color:var(--luz); text-decoration-thickness:1px; text-underline-offset:2px }
img,svg{ max-width:100%; display:block }

/* Sempre dá pra ver onde o teclado está. */
:focus-visible{ outline:2px solid var(--luz); outline-offset:2px; border-radius:4px }
:where(button,a,input,select,textarea):focus:not(:focus-visible){ outline:none }

.pular-para-conteudo{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--superficie); color:var(--tinta);
  padding:12px 18px; border-radius:0 0 var(--r-m) 0; box-shadow:var(--sombra-2);
}
.pular-para-conteudo:focus{ left:0 }

/* Quem pediu menos movimento, recebe menos movimento. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}

.so-leitor-de-tela{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.num{ font-variant-numeric:tabular-nums }