/*
 * Engei Secret Base shared UI tokens.
 * Loaded after page-specific styles so semantic states stay consistent.
 */
:root {
  --ui-panel-neutral: #faf8f2;
  --ui-panel-control: #faf8f2;
  --ui-panel-border: #d1c9b7;
  --ui-button-bg: #edf1ed;
  --ui-button-border: #799489;
  --ui-button-text: #17382e;
  --ui-button-hover-bg: #dde8e1;
  --ui-button-hover-border: #5a7668;
  --ui-button-selected-bg: #f0bd43;
  --ui-button-selected-border: #dfa82c;
}

/* Date-selection and graph-display panels share the sampled pale warm neutral. */
.consoleSection,
.viewer {
  background: var(--ui-panel-neutral);
  border-color: var(--ui-panel-border);
}

.globalNav button,
.globalNav .globalNavLink,
.plantCardLink,
.dateRow button,
.consoleActionButton,
.seasonButtons button,
.graphTabs button {
  background: var(--ui-button-bg);
  border-color: var(--ui-button-border);
  color: var(--ui-button-text);
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.globalNav .globalNavLink:visited,
.plantCardLink:visited {
  color: var(--ui-button-text);
}

.globalNav button:hover,
.globalNav .globalNavLink:hover,
.plantCardLink:hover,
.dateRow button:hover,
.consoleActionButton:hover,
.seasonButtons button:hover,
.graphTabs button:hover {
  background: var(--ui-button-hover-bg);
  border-color: var(--ui-button-hover-border);
  color: var(--ui-button-text);
  box-shadow: none;
  transform: none;
}

.globalNav button:active,
.globalNav .globalNavLink:active,
.plantCardLink:active,
.dateRow button:active,
.consoleActionButton:active,
.seasonButtons button:active,
.graphTabs button:active {
  background: var(--ui-button-selected-bg);
  border-color: var(--ui-button-selected-border);
  color: var(--ui-button-text);
  box-shadow: none;
  transform: translateY(0);
}

/* Navigation buttons do not retain a selected color. */
.globalNav button.active,
.globalNav .globalNavLink.active {
  background: var(--ui-button-bg);
  border-color: var(--ui-button-border);
  color: var(--ui-button-text);
  box-shadow: none;
}

/* Date modes, season dates, and graph modes retain the selected color. */
.dateRow button.active,
.consoleActionButton.active,
.seasonButtons button.active,
.graphTabs button.active,
.dateRow button.active:hover,
.consoleActionButton.active:hover,
.seasonButtons button.active:hover,
.graphTabs button.active:hover {
  background: var(--ui-button-selected-bg);
  border-color: var(--ui-button-selected-border);
  color: var(--ui-button-text);
  box-shadow: none;
  transform: translateY(0);
}

.globalNav button:focus-visible,
.globalNav .globalNavLink:focus-visible,
.plantCardLink:focus-visible,
.dateRow button:focus-visible,
.consoleActionButton:focus-visible,
.seasonButtons button:focus-visible,
.graphTabs button:focus-visible {
  outline: 2px solid #c49a42;
  outline-offset: 2px;
}