/* TagSquad design system tokens. Source: the TagSquad design system (tokens.json). */
@font-face {
  font-family: Fredoka;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: Fredoka;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: Fredoka;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: Figtree;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: Figtree;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: Figtree;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

:root {
  color-scheme: light dark;
  --surface: #f4f7f8;
  --surface-raised: #ffffff;
  --ink: #172b3a;
  --ink-muted: #4d6170;
  --teal: #0e7a72;
  --on-teal: #ffffff;
  --teal-strong: #0b655e;
  --teal-soft: #ddf3f0;
  --coral: #ff6b4a;
  --coral-text: #c2401f;
  --sun: #ffc845;
  --line: #d5e0e4;
  --line-strong: #7a8f99;
  --success: #1f7a4a;
  --danger: #b3261e;
  --focus: #0e7a72;
  --shadow-card: 0 1px 2px rgb(23 43 58 / 6%), 0 8px 24px rgb(23 43 58 / 8%);

  --font-display: Fredoka, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: Figtree, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

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

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0f1c24;
    --surface-raised: #172a35;
    --ink: #eaf2f3;
    --ink-muted: #a3b5be;
    --teal: #3cc2b5;
    --on-teal: #06201e;
    --teal-strong: #3cc2b5;
    --teal-soft: #143a3a;
    --coral: #ff8a6e;
    --coral-text: #ff9f87;
    --sun: #ffd36e;
    --line: #29404c;
    --line-strong: #5f7a88;
    --success: #6fd39c;
    --danger: #ff8c82;
    --focus: #ffc845;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
  }
}