/* Economizando · identidade 2026. A geometria dos símbolos está em icons/. */
:root {
  --bg:#f5f2eb;--surface:#fff;--sunk:#eee9df;--ink:#163541;--muted:#52666d;--line:#b6c7c8;
  --accent:#245b68;--accent-ink:#fff;--good:#18735a;--good-bg:#e5f2eb;
  --bad:#b34c38;--bad-bg:#faeae4;--warn:#805a20;--warn-bg:#f7edd9;
  --eco-tx:var(--ink);--eco-sub:var(--muted);--eco-surface:var(--surface);--eco-line:var(--line);--eco-active:var(--accent);--eco-tint:#e8f0ef;
  --eco-marinho:#163541;--eco-agua:var(--accent);--eco-claro:#d9ba8c;--eco-areia:#d9ba8c;--eco-control:#779298;
  --brand-green:#245b68;--brand-teal:#245b68;--brand-amber:#d9ba8c;--brand-offwhite:#f5f2eb;--brand-gray:var(--muted);
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#101f26;--surface:#192f38;--sunk:#223e46;--ink:#edf4f3;--muted:#b0c2c5;--line:#46616a;
    --accent:#a8d0d5;--accent-ink:#15343f;--good:#82c9ac;--good-bg:#183e36;
    --bad:#f0a58e;--bad-bg:#492f2c;--warn:#e6c381;--warn-bg:#403725;--eco-tint:#223e46;--eco-control:#7597a2;
  }
}
:root[data-theme="dark"] {
  --bg:#101f26;--surface:#192f38;--sunk:#223e46;--ink:#edf4f3;--muted:#b0c2c5;--line:#46616a;
  --accent:#a8d0d5;--accent-ink:#15343f;--good:#82c9ac;--good-bg:#183e36;
  --bad:#f0a58e;--bad-bg:#492f2c;--warn:#e6c381;--warn-bg:#403725;--eco-tint:#223e46;--eco-control:#7597a2;
}
/* These aliases override the earlier explicit theme aliases in index.html. */
:root[data-theme],:root:not([data-theme]) {
  --eco-tx:var(--ink);--eco-sub:var(--muted);--eco-surface:var(--surface);--eco-line:var(--line);--eco-active:var(--accent);--eco-agua:var(--accent);
}
.brand .logo-mark.sm,.lock-in>.logo-mark,.loading>.logo-mark {
  background:transparent;border:0;border-radius:0;padding:0;object-fit:contain;box-shadow:none;
}
.brand .logo-mark.sm {width:48px;height:46px}
.brand .wm b {font-size:20px;line-height:1.1;letter-spacing:-.035em}
.wm .endorsement {display:flex;align-items:center;gap:4px;margin-top:4px;font:400 10px/1.3 var(--f-body);letter-spacing:0}
.wm .endorsement-art {display:grid;align-items:center;margin:0}
.endorsement-art img {grid-area:1/1;width:98px;height:auto;border-radius:0}
.endorsement-art img.on-dark,.opening-art > .on-dark {visibility:hidden}
.opening-art {display:grid;width:100%;max-width:400px}
.opening-art > picture {grid-area:1/1;display:block;min-width:0}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .endorsement-art img.on-dark {visibility:visible}
  :root:not([data-theme="light"]) .endorsement-art img:not(.on-dark) {opacity:0}
  :root:not([data-theme="light"]) .opening-art > .on-dark {visibility:visible}
  :root:not([data-theme="light"]) .opening-art > :not(.on-dark) {opacity:0}
}
:root[data-theme="dark"] .endorsement-art img.on-dark {visibility:visible}
:root[data-theme="dark"] .endorsement-art img:not(.on-dark) {opacity:0}
:root[data-theme="dark"] .opening-art > .on-dark {visibility:visible}
:root[data-theme="dark"] .opening-art > :not(.on-dark) {opacity:0}
.brand small {font-size:11px;margin-top:3px}
.login-brand {display:grid;justify-items:center;gap:0;text-align:center;width:100%}
.login-brand .brand-opening {display:block;width:100%;max-width:400px;height:auto;border-radius:0;aspect-ratio:620/240}
.login-brand .note {margin:0 0 8px;color:var(--muted);font-size:12px}
.login-art {padding-top:12px}
.login-ilu {max-width:190px}
.lock-in .wm .endorsement {justify-content:center}
.lock-in .wm b {font-size:30px}
.btn.pri,.btn.pri:not(:disabled):hover,#main:has(>.hero) .btn.pri:not(:disabled):hover {
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:none;
}
.btn.pri:not(:disabled):hover {filter:brightness(.94)}
#main:has(>.hero) .hero {border-top-color:#d9ba8c}
.sheet .mais-opc summary small {color:var(--muted);opacity:1}
.tabs .fab svg {background:var(--accent);stroke:var(--accent-ink)}
@media(min-width:900px) {
  #app .tabs .fab,#app .tabs .fab:hover {background:var(--accent);color:var(--accent-ink)}
  #app .tabs .fab svg {stroke:var(--accent-ink)}
}
@media(max-width:380px) {
  .brand .wm b {font-size:18px}
  .brand .logo-mark.sm {width:42px;height:40px}
  .endorsement-art img {width:86px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* A variante clara preserva a geometria e a leitura no tema escuro. */
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .logo-mark {content:url("icons/monograma-claro.svg")}
}
:root[data-theme="dark"] .logo-mark {content:url("icons/monograma-claro.svg")}