/* WunderGrow 0.310: values preserve the accepted design. */
:root {
  /* Brand and surfaces */
  --navy: #131335;
  --accent: #ff1200;
  --action: #d91404;
  --action-hover: #c61204;
  --paper: #f5f4f0;
  --white: #fff;
  --muted: #646478;
  --line: #dbdbe2;
  --text-on-dark: #d7d7e3;
  --text-subtle: #c3c3d3;
  --text-language: #bdbdce;
  --surface-menu: #242448;
  --report-shadow: #e2e1db;
  --line-soft: #dcdce3;
  --hover-red: #bd0b00;

  /* Typography: headings and controls retain the original system font. */
  --font-heading: Arial, Helvetica, sans-serif;
  --font-body: WundergrowSans, Arial, sans-serif;
  --text-xs: 11px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-intro: 19px;
  --heading-section: clamp(36px, 4.2vw, 62px);

  /* Shared layout rhythm; component-specific geometry stays with the component. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --container: 1376px;
  --gutter: 64px;
  --section-space: 104px;
  --radius: 3px;
}

/* Breakpoints are literal media queries: 1441, 1120, 1100, 980, 760, 380 px.
   1120 controls the menu; 1100 controls the original large-screen layout. */
@media (max-width: 1100px) {
  :root { --gutter: 36px; }
}
@media (max-width: 980px) {
  :root { --section-space: 78px; }
}
@media (max-width: 760px) {
  :root { --gutter: 24px; --section-space: 68px; }
}
@media (max-width: 380px) {
  :root { --gutter: 20px; }
}