@font-face {
  font-family: "Open Runde";
  src: url("../fonts/OpenRunde-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url("../fonts/OpenRunde-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url("../fonts/OpenRunde-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url("../fonts/OpenRunde-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f2f2f2;
  --bg-dark: #0a0a0a;
  --bg-card: #ffffff;
  --text: #0a0a0a;
  --text-muted: rgba(10, 10, 10, 0.62);
  --text-inverse: #ffffff;
  --text-inverse-muted: rgba(255, 255, 255, 0.72);
  --pill-bg: rgba(255, 255, 255, 0.12);
  --pill-border: rgba(255, 255, 255, 0.14);
  --pill-bg-light: rgba(10, 10, 10, 0.06);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.18);
  --font-sans: Inter, "Inter Display", system-ui, sans-serif;
  --font-display: "Inter Display", Inter, system-ui, sans-serif;
  --font-logo: "Open Runde", Inter, sans-serif;
  --max: 1200px;
  --pad: clamp(16px, 4vw, 32px);
  --nav-h: 64px;
}