/* The illustrations and clay models are lit by their own paper surfaces. */
.ha-main {
  --atlas-ink: var(--ink);
  --atlas-body: var(--body);
  --atlas-soft: var(--muted);
  --atlas-rule: var(--line);
}

.ha-main, .ha-cover, .ha-card {
  --plate-stock: #c2c7b7;
  --plate-light: #d9dcca;
  --night-pigment: var(--sage);
}

@supports (color: color-mix(in srgb, white, black)) {
  .ha-main, .ha-cover, .ha-card {
    --plate-stock: color-mix(in srgb, var(--atlas-tint-deep) 72%, #72806a);
    --plate-light: color-mix(in srgb, var(--atlas-tint) 83%, #89907a);
    --night-pigment: color-mix(in srgb, var(--atlas-pigment) 36%, #f2ead5);
  }
}

.ha-index-intro h1 em { color: var(--sage); }

.ha-main .ha-kicker,
.ha-cover-caption small,
.ha-pager small,
.ha-card-label,
.ha-latin,
.ha-places dt,
.ha-landscape figcaption span,
.ha-cover:hover .ha-cover-arrow,
.ha-card:hover .ha-card-label > span:last-child {
  color: var(--night-pigment);
}

.ha-card-art, .ha-cover-image, .ha-main-plate, .ha-editorial .ha-detail-plate {
  background: radial-gradient(ellipse at 36% 30%, var(--plate-light), transparent 78%), var(--plate-stock);
  border-color: var(--atlas-rule);
}

.ha-card-art { border-bottom-color: var(--night-pigment); }

.ha-landscape-art {
  background: linear-gradient(165deg, var(--plate-light), var(--plate-stock));
}

.ha-cover,
.ha-cover-caption,
.ha-landscape figcaption,
.herb-viewer-header,
.plate figcaption {
  background: var(--paper-light);
  border-color: var(--line);
}

.ha-cover-arrow,
.ha-filter input,
.ha-filter select {
  color: var(--ink);
  background: var(--paper-light);
  border-color: #82917b;
}

.ha-filter input::placeholder { color: var(--muted); opacity: 1; }

.ha-pager, .ha-index-list { border-top-color: var(--line); }
.ha-tradition { background: var(--paper-light); color: var(--ink); }
.ha-tradition .ha-kicker, .ha-care-note b { color: var(--sage); }
.ha-care-note { border-color: var(--line); }
.ha-care-note span { color: var(--body); }

.plate, .herb-viewer {
  border-color: var(--line);
  background: var(--paper-light);
  box-shadow: 0 8px 24px rgb(8 16 11 / 20%);
}

.plate-art, .herb-viewer-stage {
  background-color: #adb79e;
  background-image:
    radial-gradient(ellipse at 49% 41%, #dee0ca 0%, transparent 76%),
    linear-gradient(90deg, #56665024 1px, transparent 1px),
    linear-gradient(#56665024 1px, transparent 1px);
}

.plate-category, .herb-viewer-caption .herb-viewer-label { color: var(--sage); }

.specimen-name-link,
.herb-viewer .herb-viewer-caption .plate-title,
.plate .plate-title {
  color: var(--ink);
}

.specimen-name-link .plate-title { text-decoration-color: #94a38b; }
.specimen-name-link > [aria-hidden], .specimen-names, .herb-viewer-caption #herb-viewer-identity { color: var(--body); }
.herb-viewer::backdrop { background: rgb(6 14 10 / 82%); }

.plate-controls button, .specimen-picker, .herb-viewer-close, .style-picker button {
  border-color: #889880;
  color: var(--ink);
  background: var(--paper-light);
}

.plate-controls button:hover,
.specimen-picker:hover,
.herb-viewer-close:hover,
.style-picker button:hover {
  color: var(--ink);
  background: #354c3d;
}

.style-picker button[aria-pressed="true"] {
  background: var(--action);
  border-color: var(--sage);
  color: var(--on-action);
}

.specimen-picker:focus-within { outline-color: var(--sage); }

.specimen-tools { color: #213929; }
.specimen-zoom, .specimen-tools .specimen-spin {
  color: #f3f0e1;
  background: #283a2e;
  border-color: #708067;
}

.specimen-zoom button { color: inherit; background: transparent; }
.specimen-zoom button + button { border-color: #66745f; }
.specimen-tools button:hover { background: #3b5141; }
.specimen-tools button:focus-visible { outline-color: #e4cf9c; }
.specimen-gesture:focus-visible, .plant-control:focus-visible { outline-color: #263f2e; }

.specimen-hint {
  color: #213929;
  background: rgb(222 224 202 / 93%);
  padding-inline: 4px;
  border-radius: 2px;
}

.study-shelf .plate-meta, .study-shelf .plant-control { color: #273d2d; }
.study-shelf .plant-control > span, .study-shelf .plate-meta > span {
  background: #d4d9c4;
  box-shadow: 0 0 0 3px #d4d9c4;
}
.study-detail { border-color: var(--line); }