/*
 * User-selectable accent colors.
 * Loaded after every site-design stylesheet so only color tokens change.
 */
html[data-accent-color="black"] {
  --md-primary: #131313;
  --md-on-primary: #ffffff;
  --md-primary-container: #e7e5e4;
  --md-on-primary-container: #1c1b1b;
  --md-inverse-primary: #dedbd9;
  --accent: var(--md-primary);
  --accent-soft: var(--md-primary-container);
}

html[data-accent-color="blue"] {
  --md-primary: #005bc1;
  --md-on-primary: #ffffff;
  --md-primary-container: #d8e2ff;
  --md-on-primary-container: #001848;
  --md-inverse-primary: #adc6ff;
  --accent: var(--md-primary);
  --accent-soft: var(--md-primary-container);
}

html[data-accent-color="teal"] {
  --md-primary: #006a60;
  --md-on-primary: #ffffff;
  --md-primary-container: #74f8e5;
  --md-on-primary-container: #00201c;
  --md-inverse-primary: #53dbc9;
  --accent: var(--md-primary);
  --accent-soft: var(--md-primary-container);
}

html[data-accent-color="green"] {
  --md-primary: #386a20;
  --md-on-primary: #ffffff;
  --md-primary-container: #b7f397;
  --md-on-primary-container: #0b2000;
  --md-inverse-primary: #9cd67d;
  --accent: var(--md-primary);
  --accent-soft: var(--md-primary-container);
}

html[data-accent-color="orange"] {
  --md-primary: #8b5000;
  --md-on-primary: #ffffff;
  --md-primary-container: #ffdcc1;
  --md-on-primary-container: #2c1600;
  --md-inverse-primary: #ffb870;
  --accent: var(--md-primary);
  --accent-soft: var(--md-primary-container);
}

html[data-accent-color="rose"] {
  --md-primary: #984061;
  --md-on-primary: #ffffff;
  --md-primary-container: #ffd9e2;
  --md-on-primary-container: #3e001d;
  --md-inverse-primary: #ffb0c8;
  --accent: var(--md-primary);
  --accent-soft: var(--md-primary-container);
}

html[data-theme="dark"][data-accent-color="black"] {
  --md-primary: #f1efed;
  --md-on-primary: #252424;
  --md-primary-container: #454343;
  --md-on-primary-container: #f5f2f1;
  --md-inverse-primary: #131313;
}

html[data-theme="dark"][data-accent-color="blue"] {
  --md-primary: #adc6ff;
  --md-on-primary: #002e6a;
  --md-primary-container: #004494;
  --md-on-primary-container: #d8e2ff;
  --md-inverse-primary: #005bc1;
}

html[data-theme="dark"][data-accent-color="teal"] {
  --md-primary: #53dbc9;
  --md-on-primary: #003731;
  --md-primary-container: #005047;
  --md-on-primary-container: #74f8e5;
  --md-inverse-primary: #006a60;
}

html[data-theme="dark"][data-accent-color="green"] {
  --md-primary: #9cd67d;
  --md-on-primary: #123800;
  --md-primary-container: #205107;
  --md-on-primary-container: #b7f397;
  --md-inverse-primary: #386a20;
}

html[data-theme="dark"][data-accent-color="orange"] {
  --md-primary: #ffb870;
  --md-on-primary: #4a2800;
  --md-primary-container: #693c00;
  --md-on-primary-container: #ffdcc1;
  --md-inverse-primary: #8b5000;
}

html[data-theme="dark"][data-accent-color="rose"] {
  --md-primary: #ffb0c8;
  --md-on-primary: #5e1133;
  --md-primary-container: #7b2949;
  --md-on-primary-container: #ffd9e2;
  --md-inverse-primary: #984061;
}

html[data-accent-color] :where(
  input[type="checkbox"],
  input[type="radio"]
) {
  accent-color: var(--md-primary) !important;
}

html[data-accent-color] .chip-checkbox input:checked + span {
  border-color: color-mix(in srgb, var(--md-primary) 38%, transparent);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.accent-option-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.accent-option {
  align-items: center;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--shape-md);
}

.accent-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.accent-option > span {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
}

.accent-option > span::before {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid color-mix(in srgb, var(--md-outline) 48%, transparent);
  border-radius: 7px;
  background: var(--accent-preview);
  content: "";
}

.accent-option:has(input:checked) {
  border-color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface-container-low));
}

.accent-option:focus-within {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.accent-option[data-accent-option="black"] { --accent-preview: #131313; }
.accent-option[data-accent-option="blue"] { --accent-preview: #005bc1; }
.accent-option[data-accent-option="teal"] { --accent-preview: #006a60; }
.accent-option[data-accent-option="green"] { --accent-preview: #386a20; }
.accent-option[data-accent-option="orange"] { --accent-preview: #8b5000; }
.accent-option[data-accent-option="rose"] { --accent-preview: #984061; }

@media (max-width: 420px) {
  html[data-accent-color] :where(
  input[type="checkbox"],
  input[type="radio"]
) {
  accent-color: var(--md-primary) !important;
}

html[data-accent-color] .chip-checkbox input:checked + span {
  border-color: color-mix(in srgb, var(--md-primary) 38%, transparent);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.accent-option-list {
    grid-template-columns: minmax(0, 1fr);
  }
}