:root {
  color-scheme: light;
  --hms-text: #17282f;
  --hms-surface-page: #ece9e1;
  --hms-surface: #f8f5ee;
  --hms-surface-raised: #fffaf2;
  --hms-surface-soft: #f0ece3;
  --hms-surface-field: #f5f1e8;
  --hms-border: #d5d0c5;
  --hms-muted: #627178;
  --hms-brand: #102f3d;
  --hms-brand-raised: #194958;
  --hms-accent: #c93347;
  --hms-accent-hover: #ad293b;
  --hms-link: #194958;
  --hms-success: #267253;
  --hms-success-surface: #dfeee6;
  --hms-warning: #835c1a;
  --hms-warning-surface: #f3e6cc;
  --hms-danger: #a43e4b;
  --hms-danger-surface: #f4dfe1;
  --hms-info: #376d84;
  --hms-info-surface: #dfeaf0;
  --hms-on-brand: #f8fbfa;
  --hms-focus-ring: rgba(201, 51, 71, .25);
  --hms-overlay: rgba(7, 18, 24, .58);
  --hms-shadow: 0 12px 35px rgba(18, 39, 48, .095);
  --hms-theme-color: #ece9e1;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --hms-text: #f0f4f3;
  --hms-surface-page: #0a151a;
  --hms-surface: #13242b;
  --hms-surface-raised: #182c34;
  --hms-surface-soft: #192b32;
  --hms-surface-field: #102027;
  --hms-border: #30464f;
  --hms-muted: #adbac0;
  --hms-brand: #102f3d;
  --hms-brand-raised: #194958;
  --hms-accent: #d64055;
  --hms-accent-hover: #e25366;
  --hms-link: #91cee0;
  --hms-success: #9be2c5;
  --hms-success-surface: #183c31;
  --hms-warning: #f0ca8d;
  --hms-warning-surface: #45361f;
  --hms-danger: #ffb0b8;
  --hms-danger-surface: #49272e;
  --hms-info: #a6d3e3;
  --hms-info-surface: #203c48;
  --hms-on-brand: #f8fbfa;
  --hms-focus-ring: rgba(226, 83, 102, .32);
  --hms-overlay: rgba(2, 9, 12, .72);
  --hms-shadow: 0 14px 38px rgba(0, 0, 0, .3);
  --hms-theme-color: #0a151a;
}

html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    fill .22s ease,
    stroke .22s ease,
    filter .22s ease,
    box-shadow .22s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}