/* Values from Figma's final semantic variables and text styles. */
@font-face {
  font-family: Inter;
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("../assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("../assets/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("../assets/fonts/manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
:root {
  --color-bg-primary: #fafbf7;
  --color-bg-secondary: #f0f4ee;
  --color-surface-sage: #e1ebdd;
  --color-bg-technical: #123c32;
  --color-accent: #426d59;
  --color-accent-dark: #123c32;
  --color-text-primary: #182d29;
  --color-text-secondary: #53665d;
  --color-border: #d1ddd2;
  --color-border-control: #53665d;
  --color-technical-signal: #267088;
  --color-button: #245c49;
  --color-button-hover: #123c32;
  --color-on-dark: #d8e5d9;
  --color-error: #bc160c;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-section: 64px;
  --content-max: 1248px;
  --gutter: clamp(24px, 6.667vw, 96px);
  --radius: 4px;
  --font-body: Inter, Arial, sans-serif;
  --font-heading: Manrope, Arial, sans-serif;
}