:root {
  --brand: rgb(56, 86, 122);
  --brand-dark: rgb(38, 61, 87);
  --brand-light: rgb(234, 241, 247);
  --accent: rgb(214, 40, 40);
  --ink: rgb(51, 51, 51);
  --muted: rgb(117, 117, 117);
  --border: rgb(228, 231, 235);
  --surface: rgb(255, 255, 255);
  --surface-alt: rgb(247, 248, 250);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 2px 10px rgba(20, 30, 45, 0.07);
  --shadow-md: 0 10px 30px rgba(20, 30, 45, 0.10);
  --shadow-lg: 0 20px 50px rgba(20, 30, 45, 0.16);

  --ease: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Safety net: no image can ever blow past its container, no matter its
   intrinsic size. Any page/component rule with a class or ID selector
   already outranks this on specificity, so it only fills gaps. */
img {
  max-width: 100%;
  height: auto;
}

/* Safety net: a single mispositioned absolute/fixed element (e.g. a
   dropdown anchored without a right offset) should never be able to
   force a page-wide horizontal scrollbar. */
html {
  overflow-x: hidden;
}