@font-face {
  font-family: "Inter";
  src: url("/static/vendor/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Identidade Wolloko: troque aqui as cores da marca */
:root {
  color-scheme: light;
  --brand: #e5112f;
  --brand-ink: #ffffff;
  --brand-deep: #16161a;
  --bg: #f4f4f1;
  --surface: #fcfcfb;
  --surface-2: #f0efec;
  --border: #e4e3de;
  --text: #0b0b0b;
  --text-2: #52514e;
  --text-3: #85847e;
  --good: #0c7a0c;
  --bad: #c22f2f;
  --warn-bg: #fff4dc;
  --warn-ink: #7a5200;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #6250d6;
  --grid: #e9e8e3;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 22, 31, .05), 0 4px 16px rgba(20, 22, 31, .04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111110; --surface: #1a1a19; --surface-2: #232321; --border: #2e2e2b;
    --text: #f0efec; --text-2: #c3c2b7; --text-3: #8d8c84;
    --good: #3fbf4f; --bad: #ef6b6b; --warn-bg: #3a2e12; --warn-ink: #f5c86a;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #9085e9;
    --grid: #2a2a28;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111110; --surface: #1a1a19; --surface-2: #232321; --border: #2e2e2b;
  --text: #f0efec; --text-2: #c3c2b7; --text-3: #8d8c84;
  --good: #3fbf4f; --bad: #ef6b6b; --warn-bg: #3a2e12; --warn-ink: #f5c86a;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #9085e9;
  --grid: #2a2a28;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 20px; }
.logo-mark { width: 34px; height: 34px; object-fit: contain; display: block; }
.logo small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 8px 14px; cursor: pointer; font-weight: 500;
}
.btn:hover { border-color: var(--text-3); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.06); border-color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }