:root {
  /* M3 Blue seed — engineer-focused, no purple gradient */
  --md-sys-color-primary: #005ac1;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d8e2ff;
  --md-sys-color-on-primary-container: #001a41;
  --md-sys-color-secondary: #535f70;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d7e3f8;
  --md-sys-color-on-secondary-container: #101c2b;
  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-on-surface-variant: #43474e;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f0f1f8;
  --md-sys-color-surface-container: #eaeaf2;
  --md-sys-color-surface-container-high: #e4e4ec;
  --md-sys-color-outline: #73777f;
  --md-sys-color-outline-variant: #c4c6cf;
  --md-sys-color-inverse-surface: #2e3135;
  --md-sys-color-inverse-on-surface: #f0f0f7;

  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --content-max-width: 1120px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

a {
  color: inherit;
  text-decoration: none;
}