/* Polaroide Studio — css/base.css  (fontes, tokens, resets, botões, campos) */
/* Fontes servidas de assets/ (mesmo domínio). Latin-1 basta para o pt-BR.
   As de legenda só baixam quando o usuário as escolhe (font-display:swap). */
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../assets/playfair.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../assets/fonts/caveat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/specialelite.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/marker.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}

:root{
  --brand:#3d5c52; --brand-deep:#2f4840; --brand-soft:rgba(61,92,82,.10); --brand-ring:rgba(61,92,82,.30);
  --gold:#a97f3d; --gold-soft:#f4ecdd;
  --paper:#f2eee6;         /* painéis laterais */
  --stage:#e6e0d4;         /* área da prancheta */
  --surface:#ffffff;
  --surface-2:#faf8f3;
  --line:#e5dfd3;
  --line-2:#efeae0;
  --ink:#23272c; --muted:#6d6a62; --faint:#9a958a;
  --danger:#b23b2c; --ok:#3d7d54; --warn:#b0781d;
  --r:10px; --r-sm:7px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(35,39,44,.05), 0 1px 10px rgba(35,39,44,.05);
  --sh-2:0 10px 34px rgba(35,39,44,.16);
  --sh-pop:0 8px 30px rgba(35,39,44,.20);
  --ui:'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --brand:#8fb7a8; --brand-deep:#a9cabd; --brand-soft:rgba(143,183,168,.14); --brand-ring:rgba(143,183,168,.35);
    --gold:#cda767; --gold-soft:#2b2921;
    --paper:#20232a; --stage:#14161a; --surface:#282c33; --surface-2:#2f333b;
    --line:#3a3f47; --line-2:#333840;
    --ink:#e8eaed; --muted:#9aa0a9; --faint:#7b818b;
    --danger:#e2705f; --ok:#7cc394; --warn:#d9a441;
    --sh-2:0 10px 34px rgba(0,0,0,.5);
    --scrl:rgba(228,231,236,.34); --scrl-hi:rgba(228,231,236,.58);
  }
}
:root{ --scrl:rgba(44,39,33,.40); --scrl-hi:rgba(44,39,33,.62); }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font:13.5px/1.5 var(--ui);color:var(--ink);background:var(--stage)}

/* Barra de rolagem: pílula fina e arredondada, no tom do tema.
   Invisível quando parada; aparece ao rolar (classe .is-scrolling via JS)
   ou ao passar o mouse pela área. */
.scrl{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .3s ease}
.scrl:hover,.scrl.is-scrolling{scrollbar-color:var(--scrl) transparent}
.scrl::-webkit-scrollbar{width:14px;height:14px}
.scrl::-webkit-scrollbar-track{background:transparent}
.scrl::-webkit-scrollbar-corner{background:transparent}
.scrl::-webkit-scrollbar-thumb{
  background-color:transparent;
  border:4px solid transparent;border-radius:999px;background-clip:content-box;
  transition:background-color .3s ease;
}
.scrl:hover::-webkit-scrollbar-thumb,
.scrl.is-scrolling::-webkit-scrollbar-thumb{background-color:var(--scrl)}
.scrl:hover::-webkit-scrollbar-thumb:hover,
.scrl.is-scrolling::-webkit-scrollbar-thumb:hover,
.scrl::-webkit-scrollbar-thumb:active{background-color:var(--scrl-hi)}

a{color:var(--brand);text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--display)}

button{font:inherit;cursor:pointer;color:var(--ink);background:var(--surface);min-width:0;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;line-height:1.15;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background .13s,border-color .13s,color .13s,box-shadow .13s}
button:hover{border-color:var(--brand);background:var(--surface-2)}
button:focus-visible{outline:2px solid var(--brand-ring);outline-offset:1px}
button:disabled{opacity:.4;cursor:default;border-color:var(--line);background:var(--surface)}
button svg{width:17px;height:17px;flex:none;display:block}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
button.accent{border-color:var(--brand);color:var(--brand);font-weight:600}
button.accent:hover{background:var(--brand-soft)}
button.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
button.danger:hover{background:color-mix(in srgb,var(--danger) 12%,var(--surface));border-color:var(--danger)}
button.ghost{border-color:transparent;background:transparent}
button.ghost:hover{background:var(--brand-soft);border-color:transparent}
.iconbtn{padding:7px;width:34px;height:34px;justify-content:center}
.iconbtn svg{width:18px;height:18px}
.chip{padding:6px 11px;border-radius:99px;font-size:12px}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

select,textarea,input[type=text],input[type=number]{font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 8px;width:100%}
select:focus,textarea:focus,input:focus{outline:2px solid var(--brand-ring);outline-offset:0;border-color:var(--brand)}
input[type=color]{border:1px solid var(--line);border-radius:var(--r-sm);height:32px;width:100%;padding:3px;background:var(--surface);cursor:pointer}
input[type=range]{width:100%;accent-color:var(--brand);height:22px}
label{display:block;margin:0 0 11px;color:var(--muted);font-size:12px}
label .v{float:right;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
label.row{display:flex;align-items:flex-start;gap:8px;color:var(--ink);font-size:12.5px}
label.row input{width:auto;margin-top:1px}
.field-inline{display:flex;gap:6px}
.field-inline>*{width:100%}

details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:9px;background:var(--surface);overflow:hidden}
summary{padding:11px 12px;cursor:pointer;font:600 12.5px/1 var(--ui);letter-spacing:.01em;
  list-style:none;user-select:none;display:flex;align-items:center;gap:9px;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary svg{width:15px;height:15px;color:var(--brand);flex:none}
summary .caret{margin-left:auto;color:var(--faint);transition:transform .16s}
details[open] summary .caret{transform:rotate(90deg)}
details[open] summary{border-bottom:1px solid var(--line-2)}
.sect{padding:12px 12px 4px}
.grp{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.btnrow>*{flex:1 1 auto;min-width:max-content;justify-content:center;
  font-size:12px;padding:7px 8px;white-space:nowrap}
.btnrow>.wfull{flex-basis:100%}
.sect button svg{width:15px;height:15px}
.sect .grp .chip{white-space:nowrap}
.hint{color:var(--muted);font-size:11.5px;line-height:1.6;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 11px;margin:2px 0 10px}
.hint b{color:var(--ink)}