/* ═══════════════════════════════════════════════════════════════════════════
   krvaletius.com — PALETA
   Copiada VERBATIM da skin "Cinzas" (vantablack) do app AUTOR
   fonte: D:\Autor\renderer\styles.css  →  .theme-cinzas (l.311-348)
                                           body.theme-cinzas (l.9054-9079)
   Não inventar cor: se faltar um tom, copiar de lá.
   ═══════════════════════════════════════════════════════════════════════════ */
/* A fonte de letreiro do site antigo. O arquivo veio de
   D:\Autor\site\assets\fonts\valdemar.ttf — o mesmo que o theautor.com usa. */
@font-face {
  font-family: 'Valdemar';
  src: url('/assets/fonts/valdemar.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ⚠ A PONTUACAO DO VALDEMAR E UM BURACO — medido em 2026-08-22.
   O arquivo TEM `&`, `?`, `:` e `!` na tabela de caracteres, mas o DESENHO
   deles e vazio: cada um mede exatamente 1 em de largura e nao pinta nada.
   Resultado na tela: "Sobre o autor _ a Jornada da saga", "Confrontar o Caos
   interior_", "ESTAMOS NO INSTAGRAM_". Um vao no meio do titulo, sem erro
   nenhum no console — foi o autor que viu, olhando o print.

   ★ E foi por isso que o Wix trocava de fonte SO nesses caracteres (Marcellus
   no `&`, Fraunces no `?`, Adobe Caslon no `:` e no `!`). A `PLANTA-WIX.md`
   tinha anotado essa troca como "efeito de fragmentacao do editor. Ignorar" —
   estava errado: era conserto, nao ruido.

   Aqui o conserto e uma segunda @font-face com o MESMO nome de familia e
   `unicode-range` so nesses quatro sinais. A regra que vem DEPOIS ganha para
   os codigos que ela declara, entao a Cinzel (serifada romana, da mesma
   familia visual) desenha a pontuacao e o Valdemar continua com as letras.
   Nao mexe em uma linha de HTML. */
@font-face {
  font-family: 'Valdemar';
  src: local('Georgia'), local('Times New Roman'), local('Cinzel'),
       url('https://fonts.gstatic.com/s/cinzel/v26/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfY3lDQ.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  /* ⚠ O PONTO ENTROU EM 2026-08-27, e pelo mesmo motivo dos outros quatro.
     MEDIDO no navegador, na pagina no ar: `measureText('.')` no Valdemar deu
     100px num corpo de 100px — 1 em exato, a assinatura do glifo vazio (no
     Georgia da 27px). O nome do autor saia "K   R   VALETIUS" no letreiro
     da home nova. Nao havia erro nenhum no console: so o vao. */
  unicode-range: U+0021, U+0026, U+002E, U+003A, U+003F;   /* ! & . : ? */
}

:root {
  /* ── tipografia da casa ───────────────────────────────────────────────
     Mesmas três famílias do theautor.com. Cinzel é fonte de inscrição
     romana — é ela que dá o ar de mármore aos títulos.
     ⚠ Estes três tokens JÁ FALTARAM uma vez: sem eles, `var(--display)`
     não resolve, o navegador não acusa erro nenhum e a página inteira cai
     em Times New Roman calada. Se sumirem, o site perde a cara. */
  /* ★★★ O CINZEL SAIU DO SITE INTEIRO (autor, 2026-08-28): *"tem muita
     cinzel no site, ja ta incomodo"*. Ele e fonte de INSCRICAO — so caixa
     alta, serifa dura, traco fino/grosso. Serve para gravar duas palavras
     em marmore; nao serve para as 10 frases de uma tabela de comparacao
     nem para paragrafo. Aqui ele estava nos DOIS papeis, em 53 lugares.
     ★ Spectral e a substituta: serifa literaria desenhada para TELA, com
     caixa baixa de verdade e traco que aguenta corpo pequeno sobre fundo
     escuro (a Cormorant Garamond e mais bonita e foi descartada por isso:
     afina e cintila no azul do fundo).
     ⚠ E ela tem 400/500/600/700. O Cinzel so vinha ate 600 e o site pedia
     700 em 7 regras — o navegador engordava na marra (fake bold).
     ⚠ O MONUMENTAL nao se perdeu: quem faz letreiro aqui e o Valdemar
     (--letreiro), que continua intocado nos titulos grandes. */
  --display: 'Spectral', Georgia, 'Times New Roman', serif;
  --serif:   'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── LETREIRO: a fonte de titulo do site ANTIGO ────────────────────────
     Medido no Wix em 2026-08-22: a fonte `wfont_1a90ff_...` resolve para
     `orig_valdemar`. E a mesma que o theautor.com ja usa como --letreiro.
     Os dois sites do autor compartilham a fonte de letreiro. */
  --letreiro: 'Valdemar', 'Spectral', Georgia, serif;

  /* ══ PALETA DO SITE ANTIGO (Wix) — medida, nao inventada ═══════════════
     O Wix NAO era dourado: era AZUL-GELO com ouro, e vermelho em duas
     secoes. Faz sentido — a mae do protagonista e a deusa do gelo e a capa
     e azul. A pele vantagold entra no FUNDO; estas cores ficam no texto,
     que e onde elas estavam. */
  --gelo:       #95E4FF;   /* COMPRAR!, SINOPSE, SKOOB, ESPECIAL COM MAIS KHAOS */
  --ciano:      #3FC9F9;   /* LANCAMENTO INEDITO, Baixar 49 pgs, Ler Online */
  --ouro-fundo: #D4A321;   /* Artes exclusivas, UMA NOVA ERA, Arquitetura, Combos */
  --ouro-claro: #F9C950;   /* selos do universo, depoimento, precos, FAQ */
  --ouro-insta: #DEBC31;   /* ESTAMOS NO INSTAGRAM */
  --rubro:      #FF0000;   /* Sobre o autor, Confrontar o Caos, ADQUIRIR! */
  --verde-frete:#0EBC5E;   /* "Ate 12x de 8,13 - Frete Gratis" */
  --branco:     #FFFFFF;   /* legendas da Arquitetura, itens dos combos, rodape */
  --quase-branco:#E6E9EB;  /* "AGuarde e clique para uma imersao maior" */
  --btn-ink:    #0d0900;   /* tinta sobre botao dourado (copiado do theautor.com) */

  /* fundos — preto absoluto */
  --bg0: #000000;
  --bg1: #000000;
  --bg2: #010101;
  --bg3: #010101;
  --bg4: #020201;
  --bg5: #040301;
  --bg0-deep: #000000;
  --vantablack-paper: #010101;

  /* bordas */
  --border:  rgba(230,185,74,.10);
  --border2: rgba(255,216,106,.22);
  --border3: rgba(255,241,168,.38);

  /* texto */
  --t1: #f5edd8;
  --t2: #cdbf9b;
  --t3: #8d8062;
  --t4: #554c39;

  /* ouro */
  --accent: #e6b94a;
  --accent2: #fff1a8;
  --accent3: rgb(var(--accent-rgb) / .17);
  --accent4: rgb(var(--accent-rgb) / .065);
  --accent-rgb: 230 185 74;

  /* ── O CÉU E O FIO DE PROGRESSO TÊM TOKEN PRÓPRIO (2026-08-29) ───────────
     Os dois liam `--accent`, que é o ouro de TODO o resto (moldura do livro 3D,
     bordas, brilhos, botões). Sem token próprio, pintar o céu de vermelho
     repintaria o site inteiro junto — uma pergunta de duas peças virando troca
     de identidade.
     ⚠⚠ AQUI O VALOR É O DOURADO DE SEMPRE, DE PROPÓSITO. O vermelho que o autor
     pediu vive dentro de `body.pele-clara`, lá embaixo, e só lá. Eu tinha posto
     o vermelho como padrão do site todo e ele viu na hora, na página do livro:
     *"voce fez o background inteiro do site mudar... era só da home"*. O fundo
     do Estrela do Caos nunca chegou a mudar (medi: continua #000), mas as
     constelações dele ficaram vermelhas — e para quem olha, o céu É o fundo.
     A lição: mudança de identidade nasce PRESA à página pedida; espalhar é
     decisão dele, não efeito colateral de onde eu escrevi a linha. */
  --ceu-rgb: var(--accent-rgb);
  --fio: var(--accent);
  --fio-cabeca: var(--gold-polished);
  --gold-polished: #ffd86a;
  --gold-flare:    #fff7c7;
  --gold-deep:     #8d6419;
  --ember: #ffd86a;
  --ember-rgb: 255 216 106;
  --ink-red: #4d3510;

  /* semânticas */
  --red: #b76b49;
  --green: #c9a94b;
  --blue: #e6c866;
  --purple: #9d762d;

  /* profundidade */
  --shadow:  0 2px 14px rgba(0,0,0,.72);
  --shadow2: 0 14px 52px rgba(0,0,0,.82), 0 0 22px rgba(230,185,74,.05);
  --shadow3: 0 30px 100px rgba(0,0,0,.94), 0 0 44px rgba(255,216,106,.06);
  --glow:    0 0 20px rgb(var(--accent-rgb) / .24), 0 0 38px rgba(255,241,168,.08);

  /* superfícies */
  --glass:  rgba(1,1,1,.94);
  --glass2: rgba(2,2,1,.98);
  --veil:   rgba(0,0,0,.80);
  --surface-sheen-ultra: rgba(255,241,168,.008);
  --surface-sheen-soft:  rgba(255,216,106,.016);
  --surface-sheen:       rgba(255,216,106,.028);
  --surface-lift-ultra:  rgba(255,216,106,.012);
  --surface-lift-soft:   rgba(255,216,106,.022);
  --surface-lift:        rgba(255,216,106,.035);
  --surface-depth-soft:   rgba(0,0,0,.28);
  --surface-depth:        rgba(0,0,0,.44);
  --surface-depth-strong: rgba(0,0,0,.58);
  --bg-hover:   rgba(230,185,74,.065);
  --control-bg: rgba(255,216,106,.016);
  --input-bg:       rgba(0,0,0,.48);
  --input-bg-focus: rgba(0,0,0,.64);
  --hairline-highlight:        rgba(255,241,168,.025);
  --hairline-highlight-strong: rgba(255,241,168,.055);
  --page-shadow:      rgba(0,0,0,.88);
  --page-edge-shadow: rgba(230,185,74,.13);
  --overlay-dim:      rgba(0,0,0,.88);
}

/* ── o AMBIENTE do vantablack (era #content::before no app) ────────────────
   poeira de ouro em dois pontos + trama diagonal levíssima, a .32 de opacidade */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.32;
  background:
    radial-gradient(circle at 22% 16%, rgba(255,216,106,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 72%, rgba(230,185,74,.10) 0 1px, transparent 2px),
    repeating-linear-gradient(135deg, transparent 0 64px, rgba(230,185,74,.012) 65px, transparent 66px);
  background-size: 260px 220px, 320px 270px, auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PELE CLARA — o papel (2026-08-29)
   ═══════════════════════════════════════════════════════════════════════════

   ★ O PEDIDO (autor): *"background será BRANCO uma cor boa para a leitura, nem
   que seja um offwhite, e as constelações animadas se tornam o mesmo vermelho
   intenso aplicado em 'OS TRABALHOS'... a barra de progresso deve virar
   vermelha também"*.

   ⚠⚠ FONTE ÚNICA, E ISSO NÃO É ARRUMAÇÃO — é a lição mais cara que este projeto
   tem sobre pele clara. No site do app, ~5 regras de CSS ENUMERAVAM as skins
   claras pelo nome e esqueciam uma delas: aquela skin caía no tratamento escuro
   e o botão sumia — preto no preto, sem erro nenhum. A cura foi uma classe só
   no <body>. Aqui é a mesma: TUDO que muda com a pele clara mora sob
   `body.pele-clara`, e nenhuma regra do site pode voltar a citar página por nome.

   ⚠ O QUE NÃO PODE SER SÓ "INVERTER O FUNDO": o dourado. `--accent` (#e6b94a) e
   `--ouro-claro` (#F9C950) foram escolhidos para brilhar sobre preto; sobre
   papel eles somem (contraste ~1.8:1, ilegível). Por isso a pele clara não muda
   só os fundos: ela reescreve a TINTA. Ouro vivo vira ouro velho, escuro o
   bastante para ser lido.

   ★ O VERMELHO É O MESMO `--rubro` (#FF0000) que já escreve "Os trabalhos" —
   não inventei tom nenhum. Ele passa a mandar em três coisas novas: as
   constelações (`--ceu-rgb`), o fio de progresso (`--fio`) e a cabeça dele. */

body.pele-clara {
  /* ── o papel ────────────────────────────────────────────────────────────
     Não é branco puro: #FBF9F5 é papel morno. Branco absoluto (#FFF) sob texto
     preto tem contraste de 21:1 e cansa em leitura longa — é por isso que livro
     nenhum é impresso em papel de escritório. */
  --bg0: #FBF9F5;
  --bg1: #FBF9F5;
  --bg2: #F6F2EA;
  --bg3: #F2EDE3;
  --bg4: #EDE7DA;
  --bg5: #E8E0D0;
  --bg0-deep: #FFFFFF;
  --vantablack-paper: #FFFFFF;

  /* ── a tinta ────────────────────────────────────────────────────────────
     Quente, nunca cinza-azulado: o site inteiro é morno (ouro, vermelho, papel),
     e tinta fria sobre papel morno lê como impressão de outra gráfica. */
  --t1: #17130C;   /* corpo de texto  — 15.9:1 sobre o papel */
  --t2: #3A3226;   /* texto secundário — 9.7:1 */
  --t3: #6A5F4C;   /* legenda        — 4.9:1, o piso do que ainda se lê */
  --t4: #9A8E77;   /* só ornamento: nunca palavra que precise ser lida */

  /* ── bordas: tinta rala, não ouro ──────────────────────────────────────── */
  --border:  rgba(23,19,12,.12);
  --border2: rgba(23,19,12,.20);
  --border3: rgba(23,19,12,.34);

  /* ── ouro de papel ─────────────────────────────────────────────────────
     O mesmo lugar na hierarquia, com luminosidade invertida. */
  --accent: #8A6412;
  --accent2: #6E4E0A;
  --accent-rgb: 138 100 18;
  --gold-polished: #7A5610;
  --gold-flare:    #9A6E12;
  --gold-deep:     #4A340A;
  --ouro-fundo: #8A6412;
  --ouro-claro: #7A5610;
  --ouro-insta: #8A6412;
  --ember: #8A6412;
  --ember-rgb: 138 100 18;
  --btn-ink: #FBF9F5;   /* tinta CLARA sobre botão escuro (ele inverteu junto) */

  /* ⚠ O gelo e o ciano do Wix eram texto sobre PRETO. Sobre papel, o #95E4FF
     tem contraste 1.4:1 — não é cor fraca, é texto invisível. Escurecidos até
     passarem de 4.5:1, mantendo a mesma família (azul da capa). */
  --gelo:  #0E5C7A;
  --ciano: #0B6E96;
  --branco: #17130C;
  --quase-branco: #3A3226;

  /* ── profundidade: sombra de papel, não de vitrine escura ─────────────── */
  --shadow:  0 1px 8px rgba(23,19,12,.08);
  --shadow2: 0 8px 30px rgba(23,19,12,.10);
  --shadow3: 0 20px 60px rgba(23,19,12,.14);
  --glow:    0 0 18px rgb(var(--ceu-rgb) / .16);

  --glass:  rgba(251,249,245,.94);
  --glass2: rgba(255,255,255,.98);
  --bg-hover:   rgba(23,19,12,.05);
  --control-bg: rgba(23,19,12,.03);
  --input-bg:       rgba(255,255,255,.72);
  --input-bg-focus: rgba(255,255,255,.94);
  --hairline-highlight:        rgba(23,19,12,.03);
  --hairline-highlight-strong: rgba(23,19,12,.07);
  --page-shadow:      rgba(23,19,12,.18);
  --page-edge-shadow: rgba(23,19,12,.10);
  --overlay-dim:      rgba(23,19,12,.55);

  /* ── O VERMELHO QUE ELE PEDIU ──────────────────────────────────────────
     Mesmo `--rubro` de "Os trabalhos". As constelações e o fio de progresso
     passam a ler daqui.
     ⚠ Sobre papel, o #FF0000 puro no TRAÇO fino vibra (o olho não fixa a
     borda). Por isso o céu usa o vermelho cheio, que é enfeite de fundo em
     opacidade baixa, e o FIO usa um vermelho um tom mais fechado, que é linha
     de 1,8px e precisa parar quieta. */
  --ceu-rgb: 255 0 0;
  --fio: #D50000;
  --fio-cabeca: #FF0000;
}

/* ⚠ A POEIRA DE OURO do vantablack é fumaça CLARA sobre preto — sobre papel ela
   vira sujeira cinza. Na pele clara ela sai, e o papel fica limpo. */
body.pele-clara::before { content: none; }