@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/inter-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/inter-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/inter-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/inter-bold.woff2') format('woff2');
}

/* PrepForCerts brand palette. Reference: the root landing homepage.
   Shared by React and standalone HTML; keep raw brand colors here. */
:root {
  --brand-blue: 224.3 76.3% 48%;
  --brand-blue-hover: 224.3 76.3% 42%;
  --brand-blue-soft: 224.3 76.3% 96%;
  --brand-blue-border: 224.3 65% 85%;
  --brand-blue-on-dark: 224.3 83% 74%;
  --brand-ink: 222.2 84% 4.9%;
  --brand-body: 215 25% 27%;
  --brand-muted: 215.4 16.3% 46.9%;
  /* Text roles for warning/vendor/attack labels on light tinted panels. */
  --brand-warning-text: 32 81% 29%;
  --brand-success-text: 140 61% 28%;
  --brand-danger-text: 0 74% 42%;
  --brand-border: 214.3 31.8% 91.4%;
  --brand-surface: 0 0% 100%;
  --brand-surface-muted: 210 40% 96.1%;
  --brand-midnight: 230 35% 7%;
  --brand-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-radius: 0.75rem;
  --brand-button-shadow: inset 0 -2px 0 hsl(0 0% 0% / .32), inset 0 1px 0 hsl(0 0% 100% / .22), 0 0 0 1px hsl(0 0% 0% / .35);
}