@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-400_700.woff2") format("woff2");
}

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/press-start-2p-400.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  --color-bg: #171D1A;
  --color-surface: #242D27;
  --color-surface-raised: #2E3931;
  --color-border: #3A493E;
  --color-text: #F1F5E9;
  --color-text-muted: #A4B6A1;
  --color-primary: #78C943;
  --color-primary-hover: #91D95D;
  --color-gold: #F2C94C;
  --color-silver: #C7D0D5;
  --color-bronze: #D99A67;
  --color-danger: #E66B6B;
  --color-info: #7FC5EF;
  --color-purple: #B59AE8;
  --color-online: #65D66E;
  --color-offline: #89948B;
  --color-warning: #F0B65A;

  --font-display: "Press Start 2P", ui-monospace, "Courier New", monospace;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-display: 2.125rem;

  --space-12: 48px;
  --touch-target: 44px;
  --transition: 160ms ease;
  --shadow-raised: 0 6px 24px rgb(0 0 0 / 35%);
  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-primary);

  --rank-1: var(--color-gold);
  --rank-2: var(--color-silver);
  --rank-3: var(--color-bronze);
}

@media (max-width: 1023px) {
  :root {
    --text-display: 1.5rem;
  }
}

@media (max-width: 639px) {
  :root {
    --text-display: 1.3125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
  }
}