/* Bankas — tokens. Mundo: vitrine limpa. Fundo claro, tinta preta, um único azul de ação, selos mono. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap");

:root {
  /* paleta única: light-dark() escolhe pelo color-scheme (sistema, ou data-theme forçando claro/escuro) */
  color-scheme: light dark;
  --ground: light-dark(#f6f7f9, #0d0f14);
  --card: light-dark(#ffffff, #171a21);
  --ink: light-dark(#0d0f14, #f2f4f8);
  --ink-soft: light-dark(#5a6070, #a3a9b8);
  --line: light-dark(#e1e4ea, #2a2e38);
  --action: light-dark(#2f5bff, #7f9bff);      /* só onde se pode agir */
  --action-ink: light-dark(#ffffff, #0a1133);
  --action-wash: light-dark(#e3e9ff, #1c2656);
  --ok: light-dark(#16794a, #6fd49a);
  --ok-wash: light-dark(#d9f0e3, #17382a);
  --warn: light-dark(#8a5f00, #e8c25a);
  --warn-wash: light-dark(#f6e7be, #3b3012);
  --danger: light-dark(#b3261e, #ff8b82);
  --danger-wash: light-dark(#f7d9d6, #472220);

  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, monospace;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.5 var(--font-ui); }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
::selection { background: var(--action-wash); color: var(--ink); }
.num { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.code { font-family: var(--font-code); font-weight: 500; letter-spacing: .02em; }
/* selos mono: NOVO, ZERO KM, BAIXOU, LOJA */
.selo { display: inline-block; font: 700 .75rem/1 var(--font-code); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: var(--r-sm); background: var(--ink); color: var(--ground); }
.selo[data-tipo="novo"] { background: var(--action); color: var(--action-ink); }
.selo[data-tipo="baixou"] { background: var(--ok-wash); color: var(--ok); }
.selo[data-tipo="loja"] { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }