/* theme.css — shell visual compartilhado das páginas (paleta espresso/clay, reset, base, animação de entrada).
   Usar numa subpágina nova:
     <link href="...Atkinson..." rel="stylesheet">
     <link rel="stylesheet" href="/theme.css">
   Depois é só o <style> com o CSS específico da página + os componentes (skills.js / setup-claude.js / contribute.js).
   Cada página pode sobrescrever --maxw no próprio :root. */
:root{
  --bg:#15120F; --bg-2:#1B1713;
  --surface:#201B16; --surface-2:#262019;
  --line:#332B22; --line-2:#41372C;
  --clay:#D2A876; --clay-deep:#B98A56; --clay-dim:#8C6A45;
  --text:#ECE3D6; --text-soft:#B6AB9A; --text-mute:#9A8C7B;
  --radius:16px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none}
body{
  font-family:'Atkinson Hyperlegible',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) 18px calc(48px + env(safe-area-inset-bottom));
  background-image:radial-gradient(120% 90% at 100% 0%, #1E1813 0%, var(--bg) 58%);
  background-attachment:fixed;
}
.wrap{max-width:var(--maxw,600px);margin:0 auto}
@media (prefers-reduced-motion: no-preference){
  .fx,.reveal{opacity:0;animation:slidein .55s var(--ease) forwards}
  .fx-1{animation-delay:.04s}.fx-2{animation-delay:.1s}
  .fx-3{animation-delay:.16s}.fx-4{animation-delay:.22s}
  .reveal-1{animation-delay:.03s}.reveal-2{animation-delay:.1s}.reveal-3{animation-delay:.17s}
  @keyframes slidein{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
}
/* skeleton (shimmer) — reserva o espaco do conteudo que vem do fetch (sem pulo de layout) */
.sk{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.sk-line{display:block;height:.8em;border-radius:6px;background:var(--surface-2);position:relative;overflow:hidden}
.sk::after,.sk-line::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(210,168,118,.10),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* botão clay compacto — reutilizado (copiar prompt, copiar chave PIX) */
.btn-clay{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 13px;border-radius:11px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;border:1px solid transparent;text-decoration:none;background:var(--clay);color:#1A1410;transition:background .18s var(--ease),transform .07s var(--ease)}
.btn-clay:hover{background:#E0B884}
.btn-clay:active{transform:translateY(1px)}
.btn-clay:focus-visible{outline:3px solid var(--clay);outline-offset:2px}