/*
 * Tema "Lenda — verde e dourado" (inspirado em The Legend of Zelda): topo de feltro verde com triângulos dourados,
 * cartões com cantos dourados, botões dourados com brilho e títulos em letra serifada. Pergaminho no claro, noite
 * dourada no escuro. Sem logos nem artes oficiais: só cores, texturas e padrões desenhados aqui.
 * Só vale com data-tema="lenda" no <html> (Painel > Aparência > Temas). Animações param com "menos movimento".
 */

/* ---------- Cores ---------- */
:root[data-tema="lenda"] {
  --lenda-verde: #1d6b3c;
  --lenda-verde-escuro: #0f3d22;
  --lenda-verde-noite: #0a2416;
  --lenda-ouro: #c9a24a;
  --lenda-ouro-claro: #f0d48a;
  --lenda-ouro-escuro: #8a6a1f;
  --lenda-creme: #f8ecca;
  --lenda-serifa: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, "Times New Roman", serif;
  --lenda-triangulos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='69.28'%3E%3Cpath d='M0 0H40M0 34.64H40M0 0L40 69.28M40 0L0 69.28' fill='none' stroke='%23e8c766' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
  --lenda-triangulos-fracos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='69.28'%3E%3Cpath d='M0 0H40M0 34.64H40M0 0L40 69.28M40 0L0 69.28' fill='none' stroke='%23a0802c' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");

  --claro-primaria: #1d6b3c;
  --claro-secundaria: #0f3d22;
  --claro-base-h: 85;
  --claro-base-c: 45;
  --claro-base-l: 100;
  --escuro-primaria: #d4a843;
  --escuro-secundaria: #3a3218;
  --escuro-base-h: 88;
  --escuro-base-c: 22;
  --escuro-base-l: 6;
  --raio-design: 4px;
}
/* Claro: pergaminho. */
:root[data-tema="lenda"], :root[data-tema="lenda"] [data-esquema="claro"] {
  --fundo-corpo: #efe3c3;
  --fundo-caixa: #fffaee;
  --borda-caixa: #dcc58c;
  --cor-link: #14502c;
  --rodape-fundo: var(--lenda-verde-noite);
  --rodape-texto: #e9d9aa;
}
/* Escuro: noite dourada, letras douradas nos botões. */
:root[data-tema="lenda"][data-esquema="escuro"] {
  --fundo-corpo: #100e08;
  --fundo-caixa: #0b0a06;
  --borda-caixa: #5e4d22;
  --cor-link: #f3dc9b;
  --texto-sobre-primaria: #1d1604;
  --rodape-fundo: #070f0a;
  --rodape-texto: #d9c48c;
}

/* ---------- Fundo da página ---------- */
:root[data-tema="lenda"] body {
  background:
    radial-gradient(80% 60% at 15% 0%, hsl(45 70% 92% / .7), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, hsl(40 55% 80% / .35), transparent 70%),
    var(--lenda-triangulos-fracos),
    var(--fundo-corpo);
  background-attachment: fixed;
}
:root[data-tema="lenda"][data-esquema="escuro"] body {
  background:
    radial-gradient(70% 60% at 50% 0%, hsl(45 60% 22% / .45), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, hsl(140 50% 14% / .35), transparent 70%),
    var(--lenda-triangulos),
    var(--fundo-corpo);
  background-attachment: fixed;
}

/* ---------- Topo: feltro verde com triângulos dourados ---------- */
[data-tema="lenda"] .cabecalho__primario,
[data-tema="lenda"] .cabecalho-movel {
  color: var(--lenda-creme);
  background:
    radial-gradient(70% 140% at 50% -20%, hsl(140 55% 30% / .55), transparent 70%),
    var(--lenda-triangulos),
    linear-gradient(180deg, #13472a, var(--lenda-verde-escuro));
  background-size: auto, 40px 69.28px, auto;
  animation: lenda-triangulos 90s linear infinite;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--lenda-ouro) 15%, var(--lenda-ouro-claro) 50%, var(--lenda-ouro) 85%, transparent) 1;
}
@keyframes lenda-triangulos { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 400px 0, 0 0; } }
[data-tema="lenda"] .cabecalho__primario .navegacao__link { color: var(--lenda-creme); font-family: var(--lenda-serifa); font-weight: 600; letter-spacing: .02em; }
[data-tema="lenda"] .cabecalho__primario .navegacao__link:hover { color: var(--lenda-ouro-claro); background: hsl(45 70% 60% / .12); }
[data-tema="lenda"] .cabecalho__primario .navegacao__link.ativo { color: var(--lenda-ouro-claro); background: hsl(45 70% 60% / .16); box-shadow: inset 0 -2px 0 var(--lenda-ouro); }
[data-tema="lenda"] .cabecalho__primario .busca-rapida { background: hsl(0 0% 0% / .25); border-color: hsl(45 60% 60% / .35); }
[data-tema="lenda"] .cabecalho__secundario { background: var(--lenda-verde-noite); color: #e9cf86; }
[data-tema="lenda"] .cabecalho__secundario a { color: #f3dc9b; }
[data-tema="lenda"] .cabecalho-movel .contador { box-shadow: 0 0 0 2px var(--lenda-verde-escuro); }

/* Nome do site em letras douradas, ao lado do símbolo dourado da E4T. */
[data-tema="lenda"] .logo__texto {
  font-family: var(--lenda-serifa);
  font-weight: 700;
  font-size: 1.12em;
  letter-spacing: .02em;
  background: linear-gradient(180deg, #fff3c4, var(--lenda-ouro-claro) 45%, var(--lenda-ouro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 hsl(0 0% 0% / .45));
}
[data-tema="lenda"] .logo__slogan { color: var(--lenda-creme); -webkit-text-fill-color: var(--lenda-creme); }
[data-tema="lenda"] .logo__simbolo-tema { width: 50px; height: 50px; transition: transform .4s cubic-bezier(.2, .7, .2, 1), filter .4s ease; }
[data-tema="lenda"] .cabecalho-movel .logo__simbolo-tema { width: 38px; height: 38px; }
[data-tema="lenda"] .logo:hover .logo__simbolo-tema { transform: rotate(-6deg) scale(1.06); filter: drop-shadow(0 0 10px hsl(45 90% 65% / .6)); }

/* ---------- Títulos ---------- */
[data-tema="lenda"] h1, [data-tema="lenda"] h2, [data-tema="lenda"] .caixa__cabecalho {
  font-family: var(--lenda-serifa);
  letter-spacing: .01em;
}
[data-tema="lenda"][data-esquema="escuro"] h1 { color: #fff4d2; }

/* ---------- Caixas com cantos dourados ---------- */
[data-tema="lenda"] .caixa {
  background-image:
    linear-gradient(135deg, var(--lenda-ouro) 0 7px, transparent 7px),
    linear-gradient(315deg, var(--lenda-ouro) 0 7px, transparent 7px);
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: top left, bottom right;
  transition: border-color .25s ease, box-shadow .25s ease;
}
[data-tema="lenda"][data-esquema="escuro"] .caixa { border-color: #7a6430; }
[data-tema="lenda"] .caixa:hover { border-color: var(--lenda-ouro); }
[data-tema="lenda"] .caixa__cabecalho { color: var(--cor-forte); }

/* ---------- Botões ---------- */
[data-tema="lenda"] .botao--primario {
  border: 1px solid var(--lenda-ouro);
  background-image: linear-gradient(110deg, transparent 35%, hsl(50 100% 90% / .35) 50%, transparent 65%), linear-gradient(180deg, #23824a, var(--lenda-verde-escuro));
  background-size: 250% 100%, auto;
  background-position: 120% 0, 0 0;
  transition: background-position .6s ease, transform .2s ease, box-shadow .2s ease;
}
[data-tema="lenda"][data-esquema="escuro"] .botao--primario {
  border-color: #fbe3a0;
  background-image: linear-gradient(110deg, transparent 35%, hsl(50 100% 95% / .55) 50%, transparent 65%), linear-gradient(180deg, #f2d27a, #c4952f);
}
[data-tema="lenda"] .botao--primario:hover { background-position: -20% 0, 0 0; transform: translateY(-1px); box-shadow: 0 6px 18px -8px hsl(45 80% 40% / .8); }
[data-tema="lenda"] .botao--primario:active { transform: none; box-shadow: none; }
[data-tema="lenda"] :focus-visible { outline-color: var(--lenda-ouro); }

/* ---------- Rodapé ---------- */
[data-tema="lenda"] .rodape {
  background-image: var(--lenda-triangulos);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--lenda-ouro) 15%, var(--lenda-ouro-claro) 50%, var(--lenda-ouro) 85%, transparent) 1;
}

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-tema="lenda"] .cabecalho__primario, [data-tema="lenda"] .cabecalho-movel { animation: none; }
  [data-tema="lenda"] .botao--primario, [data-tema="lenda"] .logo__simbolo-tema { transition: none; }
}

/* Em telas que não são largas, só o símbolo (o menu do topo precisa do espaço). */
@media (max-width: 1439px) {
  [data-tema="lenda"] .cabecalho__primario .logo__texto { display: none; }
}
[data-tema="lenda"] .cabecalho-movel .logo__texto { display: none; }