/* Tokens da direção visual aprovada (Estudo de produto, seção 11).
   Paleta e tipografia não dependem do nome/logo — só a marca (wordmark)
   é provisória até o nome fechar. */
:root {
  --bg: #F3F5F7;
  --surface: #FFFFFF;
  --surface-2: #E9ECF1;
  --border: #D6DAE2;
  --border-strong: #BCC2CE;
  --ink: #14171C;
  --ink-2: #4B535F;
  --ink-3: #7B8492;
  --accent: #2648E0;
  --accent-ink: #1B34A8;
  --accent-wash: #E7EBFB;
  --ok: #1C7F4E;
  --ok-wash: #E0F0E7;
  --warn: #9A6714;
  --warn-wash: #F5EBD8;
  --crit: #BE372B;
  --crit-wash: #F6E2DF;

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .5rem; }
a { color: var(--accent); }
.mono { font-family: var(--font-mono); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

/* topbar */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.topbar .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.topbar nav { display: flex; gap: 1rem; margin-left: auto; align-items: center; }
.topbar nav a { color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.topbar nav a:hover { color: var(--accent); }

/* barra de contexto: local + datas */
.ctxbar {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding: .7rem 0;
}
.ctxbar .wrap { display: flex; gap: .6rem; flex-wrap: wrap; width: 100%; align-items: center; }
.ctxbar input, .ctxbar select {
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: .45rem .6rem; font: inherit; background: var(--surface);
}

main.page { padding-block: 1.6rem 3rem; }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.btn.primary { background: var(--accent); border-color: var(--accent-ink); color: #fff; }
.btn.primary:hover { background: var(--accent-ink); }
.btn.block { width: 100%; }
.btn.sm { padding: .35rem .7rem; font-size: .85rem; }

/* cards / grid de produtos */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem; display: flex; flex-direction: column; gap: .5rem;
}
.pcard { display: flex; flex-direction: column; }
.pcard .img, .prod-img { aspect-ratio: 4/3; background: var(--surface-2); border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: .8rem; }
.pcard .body { padding: .8rem; display: flex; flex-direction: column; gap: .35rem; }
.pcard .code { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }
.pcard h3 { font-size: 1rem; margin: 0; }
.price { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-size: .85rem; }

.tag { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.tag.ok { background: var(--ok-wash); color: var(--ok); }
.tag.warn { background: var(--warn-wash); color: var(--warn); }
.tag.crit { background: var(--crit-wash); color: var(--crit); }

.summary-row { display: flex; justify-content: space-between; font-size: .9rem; padding: .2rem 0; }
.summary-row.total { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .5rem; font-weight: 700; }

.muted { color: var(--ink-3); font-size: .85rem; }

.stepper { display: flex; gap: .5rem; background: var(--surface); border-bottom: 1px solid var(--border); padding: .7rem 1.25rem; font-size: .85rem; }
.stepper .st { color: var(--ink-3); }
.stepper .st.on { color: var(--accent); font-weight: 700; }
.stepper .st.done { color: var(--ok); }

.cols-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }
@media (max-width: 800px) { .cols-2 { grid-template-columns: 1fr; } }

table.wt { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.wt th, table.wt td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }

form .field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .8rem; }
form label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
form input, form select, form textarea {
  border: 1px solid var(--border-strong); border-radius: 6px; padding: .55rem .7rem; font: inherit;
}
.errorlist { color: var(--crit); font-size: .85rem; list-style: none; padding: 0; margin: .2rem 0 0; }

.msgs { list-style: none; padding: 0; margin: .8rem 0; }
.msgs li { background: var(--accent-wash); color: var(--accent-ink); padding: .6rem .9rem; border-radius: 6px; margin-bottom: .4rem; font-size: .9rem; }
.msgs li.error { background: var(--crit-wash); color: var(--crit); }

footer.site { border-top: 1px solid var(--border); padding: 1.5rem 0; margin-top: 3rem; color: var(--ink-3); font-size: .85rem; }