html[data-theme="dark"] {
  color-scheme: dark;
  --color-background: 14 17 16;
  --color-on-background: 235 239 237;
  --color-surface: 20 23 22;
  --color-on-surface: 235 239 237;
  --color-surface-variant: 45 50 48;
  --color-on-surface-variant: 198 204 201;
  --color-surface-dim: 14 17 16;
  --color-surface-bright: 48 53 51;
  --color-surface-container-lowest: 9 12 11;
  --color-surface-container-low: 24 28 26;
  --color-surface-container: 29 33 31;
  --color-surface-container-high: 35 40 38;
  --color-surface-container-highest: 43 48 46;
  --color-primary: 222 227 231;
  --color-primary-dim: 191 198 202;
  --color-on-primary: 37 43 46;
  --color-primary-container: 72 79 82;
  --color-on-primary-container: 245 249 252;
  --color-primary-fixed: 222 227 231;
  --color-primary-fixed-dim: 198 205 209;
  --color-on-primary-fixed: 25 31 34;
  --color-on-primary-fixed-variant: 67 74 77;
  --color-secondary: 220 211 205;
  --color-secondary-dim: 193 184 178;
  --color-on-secondary: 40 35 32;
  --color-secondary-container: 75 68 64;
  --color-on-secondary-container: 245 237 232;
  --color-secondary-fixed: 234 225 218;
  --color-secondary-fixed-dim: 205 196 190;
  --color-on-secondary-fixed: 34 29 26;
  --color-on-secondary-fixed-variant: 83 76 72;
  --color-tertiary: 225 219 204;
  --color-tertiary-dim: 195 189 174;
  --color-on-tertiary: 39 36 29;
  --color-tertiary-container: 75 71 61;
  --color-on-tertiary-container: 249 243 231;
  --color-tertiary-fixed: 235 229 215;
  --color-tertiary-fixed-dim: 207 201 187;
  --color-on-tertiary-fixed: 34 31 25;
  --color-on-tertiary-fixed-variant: 83 79 69;
  --color-outline: 154 161 158;
  --color-outline-variant: 73 80 77;
  --color-inverse-surface: 231 235 233;
  --color-inverse-on-surface: 38 43 41;
  --color-inverse-primary: 82 89 92;
  --shadow-granite: 0 20px 45px #00000066;
}

html[data-theme="dark"] img[alt="nagrobki_granitium_logo"] {
  filter: invert(1) grayscale(1) brightness(1.8);
}

html,
html body,
html header,
html footer,
html section,
html nav,
html button,
html a {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html,
  html body,
  html header,
  html footer,
  html section,
  html nav,
  html button,
  html a {
    transition: none;
  }
}