:root {
  /* Layout */
  --width-normal: 1367px;
  --width-slim: 870px;

  /* Brand Colors */
  --utm-blue: #0b2341;
  --utm-blue-rgb: 11, 35, 65;
  --utm-orange: #ff8200;
  --utm-orange-rgb: 255, 130, 4;
  --utm-gray: #a7a9ac;
  --utm-gray-rgb: 167, 169, 172;
  --utm-gray-light: #f1f1f1;
  --utm-gray-ultralight: #fafafa;
  --utm-limestone: #f0ede3;
  --utm-limestone-rgb: 240, 237, 227;
  --utm-robinegg: #b9e1e2;
  --utm-robinegg-rgb: 185, 225, 226;
  --utm-newblue: #006c93;
  --utm-newblue-rgb: 0, 108, 147;
  --utm-newblue-light: rgba(0, 108, 147, 0.27);
  --utm-smokey: #58595b;
  --utm-smokey-dark: #333333;

  /* Accent Colors */
  --utm-torch: #e65933;
  --utm-sunsphere: #fed535;
  --utm-eureka: #ebea64;
  --utm-switchgrass: #abc178;
  --utm-legacy: #579584;
  --utm-valley: #00746f;
  --utm-globe: #006c93;
  --utm-river: #517c96;
  --utm-summitt: #b9e1e2;
  --utm-fountain: #2197a9;
  --utm-regalia: #754a7e;
  --utm-leconte: #8d2048;
  --utm-energy: #ee3e80;
  --utm-rock: #a7a9ac;
  --utm-buckskin: #705550;

  /* Typography */
  --utm-title-font: "Rokkitt";
  --utm-body-font: "Montserrat";
  --utm-heading-evens: "Montserrat";
  --utm-heading-odds: "Rokkitt";

  /* Semantic Text Tokens */
  --utm-text-gray: var(--utm-smokey);
  --utm-text-black: var(--utm-smokey-dark);
  --utm-text-blue: var(--utm-globe);
  --utm-text-on-light: #1f1f1f;
  --utm-text-on-dark: #ffffff;

  /* Neutral Ramp */
  --utm-gray1: #f6f6f6;
  --utm-gray2: #e0e0e0;
  --utm-gray3: #cacaca;
  --utm-gray4: #b6b6b6;

  /* Motion + Focus Accessibility */
  --a11y-focus-color: var(--utm-orange);
  --a11y-focus-outline: 3px solid var(--a11y-focus-color);
  --a11y-focus-offset: 2px;

  /* Existing Interaction Sizing */
  --change-indicator-height-normal: 15vh;
  --change-indicator-height-small: 7.5vh;
  --change-indicator-size: var(--change-indicator-height-normal);
}

/* Utilities */
h2.text-white,
h3.text-white,
h4.text-white,
h5.text-white,
.text-white {
  color: var(--utm-text-on-dark) !important;
}

.text-orange {
  color: var(--utm-orange) !important;
}

.text-blue {
  color: var(--utm-blue) !important;
}

/* WCAG 2.2 AA keyboard focus baseline */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: var(--a11y-focus-outline);
  outline-offset: var(--a11y-focus-offset);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid Highlight;
  }
}