@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/fredoka.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2');
}

:root {
  --color-bg: #FFFFFF;
  --color-fg: #0A0A0A;
  --color-gold: #F5C800;
  --color-gold-dark: #C9A000;
  --color-gold-muted: #FFF8CC;
  --color-gold-text: #8A6F00;
  --color-purple: #6B2FD9;
  --color-purple-hover: #5522B5;
  --color-purple-light: #EDE5FF;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-white: #FFFFFF;
  --color-danger: #E53935;
  --color-success: #43A047;
  --color-muted: #6B6480;

  /* Aliases so older rules keep working */
  --color-yellow: var(--color-gold);
  --color-yellow-dark: var(--color-gold-dark);
  --color-purple-dark: var(--color-purple-hover);
  --color-grey-900: var(--color-fg);
  --color-grey-800: #1A1A1A;
  --color-grey-700: var(--color-purple-light);
  --color-grey-400: var(--color-muted);
  --color-grey-100: var(--color-purple-light);
  --color-page: var(--color-bg);
  --color-text: var(--color-fg);

  --font-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --nav-height-bottom: 72px;
  --leaderboard-width: 280px;
  --chrome-gutter: 8px;
  --gaa-lb-gutter: 0px;
  --gaa-lb-bottom: 52px;
  --achievement-panel-height: 48px;

  --btn-gap: 16px;
  --radius-card: 16px;
  --radius-btn: 999px;
  --radius-chip: 999px;
  --outline-thick: 2px;
  --shadow-sticker: 4px 4px 0 var(--color-fg);
  --shadow-sticker-hover: 6px 6px 0 var(--color-fg);
  --shadow-gold: 4px 4px 0 var(--color-gold);
  --shadow-purple: 4px 4px 0 var(--color-purple);
  --ease-move: ease-out;
  --ease-bounce: ease-out;
  --z-consent: 20000;
  --z-protected: 10000;
  --z-popup: 9999;
  --z-banner: 9000;
  --z-chrome: 8000;
  --focus-ring: 3px solid var(--color-gold);
}