/* @font-face ---------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Colors */
  --bg: #08080a;
  --bg-subtle: #0e0e12;
  --surface: #131316;
  --surface-2: #1b1b20;
  --elevated: #232329;
  --fg1: #f5f5f7;
  --fg2: #a8a8b3;
  --fg3: #6e6e78;
  --fg-on-accent: #ffffff;

  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --accent-hover: #609afa;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.18);

  --success: #34d399;
  --warning: #fbbf24;

  /* Typography */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* Spacing (4px base) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Elevation */
  --e1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --e2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --e3: 0 18px 48px rgba(0, 0, 0, 0.55);
  --glow: 0 0 0 1px rgba(59, 130, 246, 0.38), 0 10px 34px rgba(37, 99, 235, 0.34);

  /* Motion */
  --dur-fast: 130ms;
  --dur: 220ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}