@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --brand: #4caf2c; --brand-2: #17181a; --on-brand: #111111; --on-brand-2: #ffffff;
  --bg: #f6f4f1; --surface: #ffffff; --surface-2: #f0ede8;
  --text: #1d1b19; --muted: #6f6a64; --line: #e4dfd8;
  --ok: #1f9d55; --ok-bg: #e3f5ea;
  --warn: #c77700; --warn-bg: #fff3dc;
  --crit: #d33a2c; --crit-bg: #fde7e4;
  --pref: #7a4ddb; --pref-bg: #efe8fd;
  --wa: #1fa855;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .06);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141312; --surface: #1d1c1a; --surface-2: #262422;
    --text: #f3f0ec; --muted: #a39d96; --line: #34312d;
    --ok-bg: #173323; --warn-bg: #3a2a0c; --crit-bg: #3d1914; --pref-bg: #2a1f45;
    --ok: #3ccf7a; --warn: #f0a92e; --crit: #ff6b5c; --pref: #a88bff;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 16px rgb(0 0 0 / .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141312; --surface: #1d1c1a; --surface-2: #262422;
  --text: #f3f0ec; --muted: #a39d96; --line: #34312d;
  --ok-bg: #173323; --warn-bg: #3a2a0c; --crit-bg: #3d1914; --pref-bg: #2a1f45;
  --ok: #3ccf7a; --warn: #f0a92e; --crit: #ff6b5c; --pref: #a88bff;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 16px rgb(0 0 0 / .3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }
a.btn { text-decoration: none; }
.lg-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-light { display: none; } :root:not([data-theme="light"]) .lg-dark { display: inline; } }
:root[data-theme="dark"] .lg-light { display: none; } :root[data-theme="dark"] .lg-dark { display: inline; }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .6em 1.1em; border-radius: 10px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line); transition: transform .08s, filter .15s, background .15s;
}
.btn:hover { filter: brightness(.97); }
.btn:active { transform: scale(.97); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.btn.primary { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.btn.ok { background: var(--ok); border-color: transparent; color: #fff; }
.btn.danger { color: var(--crit); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn:disabled { opacity: .45; pointer-events: none; }

.field { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  padding: .7em .85em; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; font-size: 1rem;
}

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--text); color: var(--bg); padding: .8em 1.2em; border-radius: 12px; font-weight: 600;
  transition: .25s; z-index: 100; pointer-events: none; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%); }

/* Acessibilidade: alto contraste (preto/amarelo) — ativado pelo totem ou pela página do cliente */
:root.hc, :root.hc[data-theme] {
  --bg: #000; --surface: #000; --surface-2: #111; --text: #fff; --muted: #ffe600; --line: #fff;
  --brand: #ffe600 !important; --on-brand: #000 !important; --ok: #00ff66; --crit: #ff4d4d; --warn: #ffb000; --pref: #d9b3ff;
}
:root.hc * { box-shadow: none !important; text-shadow: none !important; }
:root.hc img[data-logo] { filter: grayscale(1) brightness(2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }