@font-face { font-family: Inter; src: url('./fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Inconsolata; src: url('./fonts/inconsolata.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }

:root {
  color-scheme: only dark;
  --brand-background: #0a0a0a;
  --brand-surface: #111111;
  --brand-foreground: #f5f5f0;
  --brand-muted: #a8a8a8;
  --brand-border: #2c2c2c;
  --brand-accent: #fdda24;
  --brand-accent-hover: #ffe45c;
  --brand-accent-tint: #433b10;
  --brand-on-accent: #0a0a0a;
  --brand-success: #30a46c;
  --brand-error: #ffb4a8;
  --font-sans: Inter, Arial, sans-serif;
  --font-mono: Inconsolata, 'Courier New', monospace;
  --radius: 6px;
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  color: var(--brand-foreground);
  background: var(--brand-background);
}

::selection { background: var(--brand-accent); color: var(--brand-on-accent); }
:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
.brand-lockup { display: inline-flex; align-items: center; gap: .75em; color: var(--brand-foreground); font: 500 20px/1.2 var(--font-sans); text-decoration: none; white-space: nowrap; }
.brand-lockup img { display: block; width: 5em; height: auto; flex: none; }
.brand-lockup .brand-divider { width: 1px; height: 1em; background: var(--brand-border); flex: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.transaction-link { color: var(--brand-foreground); text-decoration: underline; text-decoration-color: white; text-underline-offset: .18em; }
.transaction-link:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 4px; }