/* Family palettes. Load after atlas.css; body[data-family] also supplies map colors. */
body[data-family="ken"] {
  --green: #245b50;
  --dark: #163f36;
  --ink: #213e35;
  --muted: #52675e;
  --line: #d6ded4;
  --paper: #f7f6ef;
  --white: #fffefa;
  --theme-soft: #edf2e8;
  --theme-softer: #f8faf4;
  --theme-hover: #e7eee2;
  --theme-selected: #dce9d7;
  --theme-border: #a8beab;
  --theme-event: #71977a;
  --theme-header-text: #fff9ea;
  --theme-header-muted: #d1dfca;
  --theme-header-line: #698877;
  --theme-header-hover: #315c49;
  --theme-tab: #fff7dd;
  --theme-focus: #af7830;
  --theme-accent: #e4c387;
  --theme-shadow: #163f3617;
}

body[data-family="bonnie"] {
  --green: #285b87;
  --dark: #18384f;
  --ink: #243c50;
  --muted: #4f6377;
  --line: #d4dce2;
  --paper: #f6f6f1;
  --white: #fffefa;
  --theme-soft: #eaf0f5;
  --theme-softer: #f5f8fa;
  --theme-hover: #e1ebf2;
  --theme-selected: #d6e6f1;
  --theme-border: #a7bccd;
  --theme-event: #6e94b0;
  --theme-header-text: #fff9ed;
  --theme-header-muted: #cddde9;
  --theme-header-line: #668198;
  --theme-header-hover: #2c526d;
  --theme-tab: #fff7e1;
  --theme-focus: #a97126;
  --theme-accent: #e6c58d;
  --theme-shadow: #18384f17;
}

body[data-family="wilcox"] {
  --green: #78436f;
  --dark: #45263f;
  --ink: #493346;
  --muted: #6c5769;
  --line: #e1d6df;
  --paper: #f8f5f1;
  --white: #fffdf9;
  --theme-soft: #f2eaf0;
  --theme-softer: #faf6f8;
  --theme-hover: #eee0ea;
  --theme-selected: #e9d8e5;
  --theme-border: #c6a8bf;
  --theme-event: #a07999;
  --theme-header-text: #fff8ed;
  --theme-header-muted: #e7d2e0;
  --theme-header-line: #97758e;
  --theme-header-hover: #63415b;
  --theme-tab: #fff5df;
  --theme-focus: #ad7427;
  --theme-accent: #e7c78d;
  --theme-shadow: #45263f17;
}

/* Header tabs remain unmistakable against every dark family masthead. */
body[data-family] .masthead {
  background: var(--dark);
  color: var(--theme-header-text);
}
body[data-family] .brand-mark { color: var(--theme-accent); }
body[data-family] .brand small,
body[data-family] .header-help { color: var(--theme-header-muted); }
body[data-family] .family-picker { border-color: var(--theme-header-line); }
body[data-family] .family-picker button { color: var(--theme-header-text); }
body[data-family] .family-picker button:not(.selected):not(:disabled):hover,
body[data-family] .header-help:not(:disabled):hover {
  background: var(--theme-header-hover);
}
body[data-family] .family-picker button.selected,
body[data-family] .family-picker button.selected:hover {
  background: var(--theme-tab);
  color: var(--dark);
  font-weight: 750;
  box-shadow: inset 0 -4px 0 var(--green), 0 1px 4px #0002;
}
body[data-family] .masthead :focus-visible {
  outline-color: var(--theme-tab);
}

/* Keep the selected person's trace controls prominent and visually related. */
body[data-family] .trace-toolbar {
  background: var(--theme-soft);
  border-color: var(--theme-border);
  box-shadow: 0 4px 16px var(--theme-shadow);
}
body[data-family] .trace-context .eyebrow,
body[data-family] .trace-summary { color: var(--muted); }
body[data-family] .trace-summary { border-color: var(--line); }
body[data-family] .trace-action {
  border-color: var(--green);
  box-shadow: 0 2px 4px var(--theme-shadow);
}
body[data-family] .trace-action.upstream,
body[data-family] .primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
body[data-family] .trace-action.upstream:not(:disabled):hover,
body[data-family] .primary:not(:disabled):hover {
  background: var(--dark);
  border-color: var(--dark);
}
body[data-family] .trace-action.downstream {
  background: var(--white);
  color: var(--green);
}
body[data-family] .trace-action.downstream:not(:disabled):hover {
  background: var(--theme-hover);
}
body[data-family] .trace-action[aria-pressed="true"] {
  outline-color: var(--theme-focus);
}
body[data-family] .trace-action:disabled { opacity: .55; }
body[data-family] .secondary,
body[data-family] input,
body[data-family] select,
body[data-family] .search-wrap { border-color: var(--theme-border); }
body[data-family] .secondary:not(:disabled):hover,
body[data-family] .quiet:not(:disabled):hover,
body[data-family] .icon-button:not(:disabled):hover {
  background: var(--theme-hover);
}
body[data-family] .trace-context .quiet:not(:disabled):hover { background: transparent; }
body[data-family] .header-help:not(:disabled):hover { background: var(--theme-header-hover); }
body[data-family] .view-switch .selected { box-shadow: 0 2px 5px var(--theme-shadow); }
body[data-family] :is(button, a, input, select):focus-visible {
  outline-color: var(--theme-focus);
}
body[data-family] .masthead :is(button, a):focus-visible {
  outline-color: var(--theme-tab);
}

/* Table and detail accents distinguish the active family beyond the header. */
body[data-family] .map-summary,
body[data-family] thead { background: var(--theme-soft); }
body[data-family] .table-filters { background: var(--theme-softer); }
body[data-family] th,
body[data-family] td { border-bottom-color: var(--line); }
body[data-family] tbody tr:hover { background: var(--theme-hover); }
body[data-family] tbody tr.selected,
body[data-family] tbody tr.selected:hover { background: var(--theme-selected); }
body[data-family] tbody tr.selected td:first-child {
  box-shadow: inset 4px 0 0 var(--green);
}
body[data-family] .person-event { border-left-color: var(--theme-event); }
body[data-family] .person-event.death { border-left-color: var(--orange); }
body[data-family] .empty-icon { color: var(--theme-event); }
body[data-family] .apply-year {
  background: var(--theme-soft);
  color: var(--green);
}
body[data-family] .unplaced-card { border-color: var(--theme-border); }
body[data-family] .unplaced-card:not(:disabled):hover { background: var(--theme-hover); }
body[data-family] .map-caption { border-color: var(--line); }
body[data-family] dialog p { color: var(--muted); }
body[data-family] .footer-separator { color: var(--theme-event); }

/* Hover must not make an unavailable action look enabled. */
body[data-family] .primary:disabled:hover {
  background: var(--green);
  border-color: var(--green);
}
body[data-family] .secondary:disabled:hover { background: var(--white); }
body[data-family] .quiet:disabled:hover { background: transparent; }