@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Syne";
  src: url("../assets/fonts/Syne-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-mono: "JetBrains Mono", monospace;
  --font-display: "Syne", sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);

  --bg-page: #13151b;
  --bg-card: #0d0f14;
  --bg-elevated: #1c2029;

  --text-primary: #eaeef5;
  --text-secondary: #9ba3b0;
  --text-muted: #667080;

  --accent-peach: #e59866;
  --accent-pink: #d98ae6;
  --accent-green: #56d364;
  --accent-cyan: #58c4dc;

  --dot-red: #ff5f56;
  --dot-yellow: #ffbd2e;
  --dot-green: #27c93f;

  --border-subtle: #252a36;
  --border-hover: #384052;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-full: 9999px;

  --container-width: min(100% - 2.5rem, 64rem);
}