
/*
DLD — FLORESTA, MADEIRA & MISTÉRIO
Paleta cartoon de aventura, mapas antigos e cabanas na floresta.
Cole ao final do CSS de teste atual.
*/

:root {
  --bg: #d8c7a5;
  --paper: #f4e7ca;
  --paper-dark: #dfc69d;
  --ink: #423126;
  --muted: #79644d;
  --line: #a88b65;

  --accent: #bd633b;
  --accent-dark: #82412d;
  --shadow: rgba(61, 40, 25, .24);

  --pink: #d98975;
  --orange: #d98243;
  --yellow: #edc66e;
  --cyan: #8ebdb0;
  --purple: #a69ab8;
  --blue: #7399a0;

  --sky-deep: #35483b;
  --sky-mid: #788052;
  --sky-light: #e8ddc1;
  --crystal: #8ebdb0;
  --starlight: #fff0c4;

  --forest: #35483b;
  --moss: #788052;
  --wood: #80543b;
  --parchment: #f4e7ca;
}

/* FUNDO: papel antigo com variações de luz e pigmento */

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  background-color: #d8c7a5;
  background-image:
    radial-gradient(
      ellipse at 10% 8%,
      rgba(255, 244, 211, .8),
      transparent 32rem
    ),
    radial-gradient(
      ellipse at 90% 18%,
      rgba(110, 126, 76, .23),
      transparent 29rem
    ),
    radial-gradient(
      ellipse at 72% 82%,
      rgba(191, 112, 68, .13),
      transparent 34rem
    ),
    repeating-linear-gradient(
      2deg,
      rgba(105, 76, 48, .035) 0,
      rgba(105, 76, 48, .035) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(145deg, #e8ddc1, #d4c09a 65%, #dfe0c1);
}

::selection {
  background: #edc66e;
  color: #423126;
}

a {
  color: #80513a;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: #bd633b;
}

/* CABEÇALHO: madeira escura e folhas */

header {
  color: #fff0d0;
  background:
    repeating-linear-gradient(
      4deg,
      rgba(255, 225, 173, .035) 0,
      rgba(255, 225, 173, .035) 2px,
      transparent 2px,
      transparent 9px
    ),
    radial-gradient(
      ellipse at 80% 0,
      rgba(139, 158, 95, .27),
      transparent 48%
    ),
    linear-gradient(120deg, #4c3529, #60432e 58%, #46533a);
  border-bottom: 4px solid #39271e;
  box-shadow: 0 5px 0 rgba(61, 40, 25, .16);
}

.site-title,
.gallery-heading h2,
.diary-heading h2,
.entry h2 {
  color: #5b4931;
  text-shadow: 1px 1px 0 #fff2d4;
}


header > a:first-child {
  color: #493326;
  background: #edc66e;
  border-color: #39271e;
  box-shadow: 6px 6px 0 #bd633b;
}

header > a:first-child:hover {
  box-shadow: 8px 8px 0 #8ebdb0;
}

header .site-subtitle {
 # color: #493326;
  background: #f4e7ca;
  border-color: #39271e;
  box-shadow: 4px 4px 0 #788052;
}

/* NAVEGAÇÃO: etiquetas de um mapa ilustrado */

.main-nav a,
nav a {
  color: #423126;
  background: #f4e7ca;
  border-color: #80543b;
  box-shadow: 3px 3px 0 #80543b;
}

.main-nav a:nth-child(6n + 1) { background: #e6c99d; }
.main-nav a:nth-child(6n + 2) { background: #c5c99f; }
.main-nav a:nth-child(6n + 3) { background: #edc66e; }
.main-nav a:nth-child(6n + 4) { background: #d9a18a; }
.main-nav a:nth-child(6n + 5) { background: #b6d0c1; }
.main-nav a:nth-child(6n + 6) { background: #b7b2cb; }

.main-nav a:hover,
nav a:hover {
  color: #fff2d4;
  background: #536348 !important;
  border-color: #39271e !important;
  box-shadow: 1px 1px 0 #39271e;
}

.main-nav a.active,
.main-nav a[aria-current="page"],
nav a.active,
nav a[aria-current="page"] {
  color: #fff2d4;
  background: #80543b !important;
  border-color: #39271e !important;
}

/* FOCO ACESSÍVEL */

a:focus-visible,
button:focus-visible,
textarea:focus-visible {
  outline: 3px dashed #bd633b;
  outline-offset: 4px;
}

/* LATERAL: caderno de campo */

.sidebar {
  color: #423126;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(111, 78, 47, .035) 0,
      rgba(111, 78, 47, .035) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(145deg, #f7edda, #e9d9b8);
  border-color: #a88b65;
  box-shadow: 5px 5px 0 #9c8862;
}

.sidebar-image {
  background: #c5c99f;
  border-color: #80543b;
  box-shadow: 4px 4px 0 #bd633b;
}

.bio {
  border-color: #c2a77d;
}

.bio h2,
.sidebar b,
.sidebar center b {
  color: #536348;
}

.bio p {
  color: #79644d;
}

#botao,
button#botao {
  #color: #fff2d4;
  background: #80543b;
  border-color: #4b3023;
  box-shadow: 3px 3px 0 #4b3023;
}

#botao:hover,
button#botao:hover {
  #color: #423126;
  background: #edc66e;
}

/* INTRODUÇÃO: papel, luz dourada e tinta */

.intro {
  color: #423126;
  background:
    radial-gradient(
      ellipse at 96% 2%,
      rgba(237, 198, 110, .34),
      transparent 44%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(111, 78, 47, .025) 0,
      rgba(111, 78, 47, .025) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(145deg, #f8efd9, #ead9b7);
  border-color: #b59a70;
  border-left-color: #bd633b;
  box-shadow: 5px 5px 0 #8eb19b;
}

.intro p {
  color: #604a36;
}

.intro::after {
  color: #423126;
  background: #edc66e;
  border-color: #80543b;
}

/* GALERIA: cada cartão ganha uma cor de aventura */

.gallery-card {
  color: #423126;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .35), transparent 68%),
    #f4e7ca;
  border-color: #a88b65;
  box-shadow: 4px 4px 0 #9c8862;
}

.gallery-card:nth-child(6n + 1) { box-shadow: 4px 4px 0 #bd8061; }
.gallery-card:nth-child(6n + 2) { box-shadow: 4px 4px 0 #8b9b69; }
.gallery-card:nth-child(6n + 3) { box-shadow: 4px 4px 0 #d2ad5c; }
.gallery-card:nth-child(6n + 4) { box-shadow: 4px 4px 0 #82aaa2; }
.gallery-card:nth-child(6n + 5) { box-shadow: 4px 4px 0 #a69ab8; }
.gallery-card:nth-child(6n + 6) { box-shadow: 4px 4px 0 #b68a59; }

.gallery-card:hover {
  border-color: #80543b;
  box-shadow: 6px 6px 0 #bd633b;
}

.gallery-thumb {
  background:
    radial-gradient(circle at 82% 12%, rgba(237, 198, 110, .34), transparent 45%),
    linear-gradient(145deg, #d9e0c5, #e8d4b3);
  border-bottom-color: #b59a70;
}

.gallery-card h3 {
  color: #5b4931;
}

.gallery-open {
  color: #a85435;
}

/* DIÁRIO: trilha pontilhada */

.diary-heading {
  border-top-color: #80543b;
}

.timeline::before {
  background: repeating-linear-gradient(
    to bottom,
    #788052 0 10px,
    transparent 10px 16px
  );
}

.date {
  color: #a85435;
}

.date::after {
  background: #edc66e;
  border-color: #80543b;
}

.entry:hover .date::after {
  background: #d98975;
}

.entry-content {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(111, 78, 47, .025) 0,
      rgba(111, 78, 47, .025) 1px,
      transparent 1px,
      transparent 5px
    ),
    #f4e7ca;
  border-color: #a88b65;
  box-shadow: 5px 5px 0 #9c8862;
}

.entry:nth-of-type(6n + 1) .entry-content { box-shadow: 5px 5px 0 #bd8061; }
.entry:nth-of-type(6n + 2) .entry-content { box-shadow: 5px 5px 0 #8b9b69; }
.entry:nth-of-type(6n + 3) .entry-content { box-shadow: 5px 5px 0 #d2ad5c; }
.entry:nth-of-type(6n + 4) .entry-content { box-shadow: 5px 5px 0 #82aaa2; }
.entry:nth-of-type(6n + 5) .entry-content { box-shadow: 5px 5px 0 #a69ab8; }
.entry:nth-of-type(6n + 6) .entry-content { box-shadow: 5px 5px 0 #b68a59; }

.entry p {
  color: #604a36;
}

.entry-meta {
  color: #536348;
  background: #e5e5cc;
  border-color: #b5b48e;
}

.caption {
  color: #79644d;
}

/* MOLDURAS E ILUSTRAÇÕES */

figure[data-lightbox],
.artwork,
.carousel-track {
  border-color: #80543b;
  background:
    repeating-linear-gradient(
      45deg,
      #f4e7ca 0 9px,
      #e9d9b8 9px 18px
    );
  box-shadow: 4px 4px 0 rgba(61, 40, 25, .18);
}

figure[data-lightbox] {
  background: #f4e7ca;
}

.artwork::after {
  color: #423126;
  background: #edc66e;
  border-color: #80543b;
}

/* DESAFIOS: mapas, pistas e descobertas */

.challenge {
  color: #423126;
  background:
    radial-gradient(ellipse at 90% 0, rgba(237, 198, 110, .3), transparent 50%),
    repeating-linear-gradient(
      0deg,
      rgba(111, 78, 47, .02) 0,
      rgba(111, 78, 47, .02) 1px,
      transparent 1px,
      transparent 5px
    ),
    #f4e7ca;
  border-color: #98704c;
  box-shadow: 4px 4px 0 #8b9b69;
}

.challenge::before {
  color: #fff2d4;
  background: #80543b;
  border-color: #4b3023;
}

.challenge:nth-of-type(even),
.sidebar-image + .challenge {
  box-shadow: 4px 4px 0 #bd8061;
}

.challenge input,
.challenge-items input {
  accent-color: #788052;
}

.challenge-list {
  border-top-color: #bca17a;
}

.challenge-list h2 {
  color: #5b4931;
}

.challenge-list p,
.challenge-group h3 {
  color: #79644d;
}

.progress {
  color: #80543b;
}

.challenge-items li {
  border-bottom-color: #cdb891;
}

/* CARROSSEL */

.carousel-track {
  background-color: #e8ddc1;
}

.carousel-prev,
.carousel-next {
  color: #423126;
  background: #edc66e;
  border-color: #80543b;
  box-shadow: 3px 3px 0 #80543b;
}

.carousel-prev:hover,
.carousel-next:hover {
  color: #fff2d4;
  background: #536348;
}

.carousel-dot {
  border-color: #80543b;
}

.carousel-dot.active {
  background: #bd633b;
}

/* LIVRO: papel envelhecido e lombada de couro */

.book {
  color: #423126;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(111, 78, 47, .04) 0,
      rgba(111, 78, 47, .04) 1px,
      transparent 1px,
      transparent 5px
    ),
    #f4e7ca;
  border-color: #80543b;
  box-shadow: 6px 6px 0 #9c8862;
}

.pageL,
.pageR {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(111, 78, 47, .03) 0,
      rgba(111, 78, 47, .03) 1px,
      transparent 1px,
      transparent 5px
    ),
    #f4e7ca;
}

.pageL { border-right-color: #c5ad86; }
.pageR { border-left-color: #c5ad86; }

.seam {
  background: linear-gradient(
    to right,
    #f4e7ca,
    #c5ad86,
    #f4e7ca
  );
}

/* TOOLTIP */

.tooltip::before {
  color: #fff2d4;
  background: #4c3529;
  border-color: #edc66e;
  box-shadow: 0 4px 12px rgba(61, 40, 25, .28);
}

/* CARTÕES E CAMPOS */

.card {
  color: #423126;
  border-color: #b59a70;
  background: rgba(244, 231, 202, .96);
}

textarea {
  color: #423126;
  background: #fbf3df;
  border-color: #b59a70;
}

/* RODAPÉ: floresta ao entardecer */

footer {
  color: #f4e7ca;
  background:
    radial-gradient(ellipse at 50% 0, rgba(139, 158, 95, .24), transparent 70%),
    repeating-linear-gradient(
      3deg,
      rgba(255, 225, 173, .025) 0,
      rgba(255, 225, 173, .025) 2px,
      transparent 2px,
      transparent 8px
    ),
    #4c3529;
  border-top: 4px solid #39271e;
}

footer p,
footer small {
  color: #ead9b8;
}

footer a,
.guestbook {
  color: #fff0c4;
}

.guestbook {
  color: #423126;
  background: #edc66e;
  border-color: #80543b;
  box-shadow: 3px 3px 0 #39271e;
}

.guestbook:hover {
  color: #fff2d4;
  background: #536348;
}

/* LIGHTBOX */

.lightbox {
  background: rgba(43, 36, 28, .93);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  color: #fff2d4;
  background: rgba(76, 53, 41, .92);
  border-color: #edc66e;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: #536348;
}

/* PIXEL-HOVER: mantém o efeito multicolorido */

.pixel-hover {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
