:root {
  color-scheme: light;
  --cor-papel: #F5E6C8;
  --cor-papel-escuro: #EDD9A3;
  --cor-capa: #3B2010;
  --cor-titulo: #5C3D1E;
  --cor-texto: #2C1A0E;
  --cor-acento: #A0522D;
  --cor-acento-suave: #C4845A;
  --cor-verde-ervas: #6B7C5C;
  --cor-borda: #C9A97A;
  --cor-sombra: rgba(44, 26, 14, 0.25);
  --cor-luz-24: rgba(255, 255, 255, 0.24);
  --cor-luz-20: rgba(255, 255, 255, 0.2);
  --cor-luz-18: rgba(255, 255, 255, 0.18);
  --cor-luz-15: rgba(255, 255, 255, 0.15);
  --cor-luz-14: rgba(255, 255, 255, 0.14);
  --cor-luz-40: rgba(245, 230, 200, 0.4);
  --cor-luz-25: rgba(245, 230, 200, 0.25);
  --cor-escura-38: rgba(44, 26, 14, 0.38);
  --cor-escura-22: rgba(44, 26, 14, 0.22);
  --cor-escura-20: rgba(44, 26, 14, 0.2);
  --cor-escura-12: rgba(44, 26, 14, 0.12);
  --cor-escura-08: rgba(44, 26, 14, 0.08);
  --cor-escura-05: rgba(44, 26, 14, 0.05);
  --cor-escura-03: rgba(44, 26, 14, 0.03);
  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-corpo: 'Lora', 'Times New Roman', serif;
  --fonte-manuscrita: 'Dancing Script', cursive;
  --fonte-ui: 'Lato', system-ui, sans-serif;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.25rem;
  --texto-xl: 1.5rem;
  --texto-2xl: 2rem;
  --texto-3xl: 2.5rem;
  --espaco-xs: 4px;
  --espaco-sm: 8px;
  --espaco-md: 16px;
  --espaco-lg: 24px;
  --espaco-xl: 40px;
  --espaco-2xl: 64px;
  --duracao-pagina: 800ms;
  --duracao-pagina-rapida: 300ms;
  --curva-pagina: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --perspectiva: 1500px;
  --raio-sm: 4px;
  --raio-md: 8px;
  --raio-lg: 16px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cor-papel: #241913;
  --cor-papel-escuro: #18110d;
  --cor-capa: #0F0A08;
  --cor-titulo: #F4DEC2;
  --cor-texto: #E7D4BF;
  --cor-acento: #D89A62;
  --cor-acento-suave: #B87847;
  --cor-verde-ervas: #A6C08A;
  --cor-borda: #8F6A46;
  --cor-sombra: rgba(0, 0, 0, 0.42);
  --cor-luz-24: rgba(244, 222, 194, 0.12);
  --cor-luz-20: rgba(244, 222, 194, 0.1);
  --cor-luz-18: rgba(244, 222, 194, 0.08);
  --cor-luz-15: rgba(244, 222, 194, 0.07);
  --cor-luz-14: rgba(244, 222, 194, 0.06);
  --cor-luz-40: rgba(244, 222, 194, 0.2);
  --cor-luz-25: rgba(244, 222, 194, 0.16);
  --cor-escura-38: rgba(0, 0, 0, 0.56);
  --cor-escura-22: rgba(0, 0, 0, 0.34);
  --cor-escura-20: rgba(0, 0, 0, 0.3);
  --cor-escura-12: rgba(0, 0, 0, 0.2);
  --cor-escura-08: rgba(0, 0, 0, 0.14);
  --cor-escura-05: rgba(0, 0, 0, 0.1);
  --cor-escura-03: rgba(0, 0, 0, 0.07);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-md);
  background: var(--cor-papel);
  transition: background-color 220ms ease, color 220ms ease;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--cor-acento-suave);
  opacity: 0.9;
}

button,
a {
  transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--espaco-sm);
  left: var(--espaco-sm);
  z-index: 60;
  padding: var(--espaco-sm) var(--espaco-md);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  color: var(--cor-papel);
  font-family: var(--fonte-ui);
  background: linear-gradient(135deg, var(--cor-acento), var(--cor-acento-suave));
  box-shadow: 0 12px 24px var(--cor-sombra);
  transform: translateY(-140%);
  opacity: 0;
}

.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
}

:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 3px;
}

.fundo-livro {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at top left, var(--cor-papel), transparent 45%),
    radial-gradient(circle at bottom right, var(--cor-papel-escuro), transparent 35%),
    linear-gradient(135deg, var(--cor-papel-escuro), var(--cor-papel));
}

.pagina-textura,
.card-admin,
.capa-livro,
.dropdown-busca,
.preview-imagem,
.resultado-busca,
.item-lista,
.receita-info,
.receita-corpo,
.estado-vazio,
.topo-livro,
.admin-topo,
.busca-shell input,
.campo input,
.campo select,
.campo textarea,
.tags-input-shell,
.lista-item {
  background-image:
    linear-gradient(180deg, var(--cor-luz-18), transparent),
    linear-gradient(90deg, var(--cor-escura-03), transparent 45%, var(--cor-escura-05));
}

.sobretitulo {
  margin: 0 0 var(--espaco-sm);
  color: var(--cor-acento);
  font-family: var(--fonte-ui);
  font-size: var(--texto-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.botao-primario,
.botao-secundario,
.botao-perigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-sm);
  min-height: 44px;
  padding: var(--espaco-sm) var(--espaco-lg);
  border-radius: var(--raio-md);
  border: 1px solid var(--cor-borda);
  font-family: var(--fonte-ui);
  font-size: var(--texto-sm);
  letter-spacing: 0.04em;
}

.botao-primario {
  color: var(--cor-papel);
  background: linear-gradient(135deg, var(--cor-acento), var(--cor-acento-suave));
  box-shadow: 0 12px 24px var(--cor-sombra);
}

.botao-secundario {
  color: var(--cor-titulo);
  background: linear-gradient(135deg, var(--cor-papel), var(--cor-papel-escuro));
}

.botao-perigo {
  color: var(--cor-papel);
  background: linear-gradient(135deg, var(--cor-capa), var(--cor-acento));
}

.botao-primario:hover,
.botao-secundario:hover,
.botao-perigo:hover,
.botao-primario:focus-visible,
.botao-secundario:focus-visible,
.botao-perigo:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px var(--cor-sombra);
}

.botao-utilitario {
  min-height: 40px;
  padding-inline: var(--espaco-md);
  white-space: nowrap;
}

.theme-toggle {
  gap: calc(var(--espaco-sm) - 2px);
}

.theme-toggle::before {
  display: inline-grid;
  place-items: center;
  min-width: 1.1rem;
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle[data-theme-icon="light"]::before {
  content: "\2600";
}

.theme-toggle[data-theme-icon="dark"]::before {
  content: "\263E";
}

.theme-toggle[data-theme-icon="auto"]::before {
  content: "\25D1";
}

.painel-status-shell {
  display: flex;
}

.offline-layout {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--espaco-xl);
}

.offline-card {
  width: min(100%, 720px);
  padding: clamp(var(--espaco-lg), 4vw, var(--espaco-2xl));
  border: 1px solid var(--cor-borda);
  border-radius: calc(var(--raio-lg) * 1.25);
  box-shadow: 0 24px 48px var(--cor-sombra);
}

.offline-card h1 {
  margin: 0 0 var(--espaco-md);
  color: var(--cor-titulo);
  font-family: var(--fonte-titulo);
  font-size: clamp(var(--texto-2xl), 5vw, 3.25rem);
}

.offline-card p {
  margin: 0;
  line-height: 1.7;
}

.offline-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-md);
  margin-top: var(--espaco-xl);
}

.offline-lista {
  margin: var(--espaco-xl) 0 0;
  padding-left: 1.2rem;
  line-height: 1.8;
}

.sync-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-sm);
}

.sync-badge {
  min-height: 38px;
  padding: var(--espaco-xs) var(--espaco-md);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-titulo);
  font-family: var(--fonte-ui);
  font-size: var(--texto-sm);
  background-color: var(--cor-papel);
}

.sync-badge--ok {
  color: var(--cor-verde-ervas);
}

.sync-badge--warning {
  color: var(--cor-acento);
}

.sync-badge--offline {
  color: var(--cor-titulo);
}

.sync-badge--erro {
  color: var(--cor-capa);
}

.sync-status__detail {
  max-width: 320px;
  color: var(--cor-titulo);
  font-family: var(--fonte-ui);
  font-size: var(--texto-xs);
  line-height: 1.4;
}

[hidden] {
  display: none !important;
}

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

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

@media (max-width: 720px) {
  .offline-layout {
    padding: var(--espaco-lg);
  }

  .offline-card {
    padding: var(--espaco-lg);
  }

  .offline-acoes {
    flex-direction: column;
  }
}