@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/geist-mono-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/pirata-one-latin-400-normal.woff2') format('woff2');
}

:root {
  --color-bg: #060f1c;
  --color-panel: rgba(6, 15, 28, 0.88);
  --color-parchment: #f3e6c9;
  --color-muted: #a7b6c4;
  --color-gold: #f2c14e;
  --color-gold-dark: #9c6d12;
  --color-ink: #1d1404;
  --color-error: #ff8a7a;
  --color-success: #8fe3a6;
  --color-border: rgba(243, 230, 201, 0.25);

  --font-display: 'Anton', Impact, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-pirate: 'Pirata One', Georgia, serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  --sponsor-column-width: 220px;
  --sponsor-bar-height: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-parchment);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}