/* Aurora 2.2 — related, quiet hues distinguish surface roles without changing
   status meaning, interaction geometry or the forest-green brand. */
:root {
  --tone-jade: #eef5f0;
  --tone-sage: #f1f5eb;
  --tone-teal: #edf4f4;
  --tone-stone: #f6f3ed;
  --tone-jade-line: #cfdfd4;
  --tone-sage-line: #d8e0d1;
  --tone-teal-line: #d0e0de;
  --tone-stone-line: #e1ddd2;
  --tone-art: #3d746d;
  --tone-art-grid: #3d746d1a;
  --tone-muted: #596e66;
  --tone-value: #235b48;
  --tone-value-end: #194836;
  --tone-value-ink: #f3fbf6;
  --tone-value-muted: #d5e8dc;
}
html[data-theme=dark] {
  --tone-jade: #23342b;
  --tone-sage: #2a352a;
  --tone-teal: #243437;
  --tone-stone: #33342d;
  --tone-jade-line: #40594a;
  --tone-sage-line: #485a43;
  --tone-teal-line: #43595b;
  --tone-stone-line: #55584a;
  --tone-art: #acd0c7;
  --tone-art-grid: #acd0c71a;
  --tone-muted: #b4c5bc;
  --tone-value: #254b39;
  --tone-value-end: #213c2f;
  --tone-value-ink: #edf7f0;
  --tone-value-muted: #cee2d5;
}

/* Value is the sole deep-color surface. Its copy stays readable in both modes. */
html .stat.featured {
  background: linear-gradient(135deg, var(--tone-value), var(--tone-value-end));
  border-color: var(--tone-jade-line);
  color: var(--tone-value-ink);
  box-shadow: none;
}
html .stat.featured .number { color: var(--tone-value-ink); }
html .stat.featured :is(label, .caption) { color: var(--tone-value-muted); }
html .stat.featured .stat-icon {
  background: #ffffff0d;
  border-color: #ffffff33;
  color: var(--tone-value-ink);
}
html .stat:not(.featured) .stat-icon {
  background: var(--tone-jade);
  border-color: var(--tone-jade-line);
  color: var(--accent);
}

/* Teal marks support and technical context; the input surfaces stay neutral. */
html .incident-panel > .panel-head,
html .incident-panel > .incident-filters {
  background: var(--tone-teal);
  border-color: var(--tone-teal-line);
}
html .passport {
  background: linear-gradient(125deg, var(--tone-jade), var(--surface));
  border-color: var(--tone-jade-line);
}
html .device-stage {
  background: linear-gradient(135deg, var(--tone-teal), var(--tone-jade));
}
html .device-stage svg { color: var(--tone-art); }
html .device-stage .device-grid { stroke: var(--tone-art-grid); }

/* Sage and warm stone identify explanatory or reporting surfaces, rather than
   turning individual records into arbitrary categories of color. */
html :is(.equipment-intro, .note-card) {
  background: var(--tone-sage);
  border-color: var(--tone-sage-line);
  color: var(--tone-muted);
}
html .note-card strong { color: var(--ink); }
html .source-note {
  background: var(--tone-stone);
  border-color: var(--tone-stone-line);
  color: var(--tone-muted);
}
html .report-card {
  background: linear-gradient(145deg, var(--surface) 45%, var(--tone-stone));
  border-color: var(--tone-stone-line);
}
html .report-card.feature {
  background: linear-gradient(135deg, var(--tone-sage), var(--surface));
  border-color: var(--tone-sage-line);
  box-shadow: none;
}
html #export-center > .panel-head {
  background: var(--tone-sage);
  border-color: var(--tone-sage-line);
}
html :is(.report-card, .report-card.feature) p { color: var(--tone-muted); }
html :is(.incident-panel > .panel-head p, .incident-panel > .incident-filters label,
  .passport p, .note-card p, .equipment-intro p, .report-card .hint,
  #export-center > .panel-head p) { color: var(--tone-muted); }

/* Override earlier dark surface resets without changing controls or motion. */
html[data-theme=dark] .stat.featured {
  background: linear-gradient(135deg, var(--tone-value), var(--tone-value-end));
  border-color: var(--tone-jade-line);
}
html[data-theme=dark] .stat.featured .number { color: var(--tone-value-ink); }
html[data-theme=dark] .stat.featured :is(label, .caption) { color: var(--tone-value-muted); }
html[data-theme=dark] .stat.featured .stat-icon { background: #ffffff0d; color: var(--tone-value-ink); }
html[data-theme=dark] .stat:not(.featured) .stat-icon { background: var(--tone-jade); color: var(--accent); }
html[data-theme=dark] .passport { background: linear-gradient(125deg, var(--tone-jade), var(--surface)); border-color: var(--tone-jade-line); }
html[data-theme=dark] .device-stage { background: linear-gradient(135deg, var(--tone-teal), var(--tone-jade)); }
html[data-theme=dark] .device-stage svg { color: var(--tone-art); }
html[data-theme=dark] .device-stage .device-grid { stroke: var(--tone-art-grid); }
html[data-theme=dark] :is(.equipment-intro, .note-card) { background: var(--tone-sage); border-color: var(--tone-sage-line); }
html[data-theme=dark] .source-note { background: var(--tone-stone); border-color: var(--tone-stone-line); }
html[data-theme=dark] .report-card { background: linear-gradient(145deg, var(--surface) 45%, var(--tone-stone)); border-color: var(--tone-stone-line); }
html[data-theme=dark] .report-card.feature { background: linear-gradient(135deg, var(--tone-sage), var(--surface)); border-color: var(--tone-sage-line); }
html[data-theme=dark] .incident-panel > .incident-filters { background: var(--tone-teal); border-color: var(--tone-teal-line); }

@media (forced-colors: active) {
  html :is(.stat.featured, .incident-panel > .panel-head,
    .incident-panel > .incident-filters, .passport, .device-stage,
    .equipment-intro, .note-card, .source-note, .report-card,
    .report-card.feature, #export-center > .panel-head) {
    background: Canvas !important;
    border-color: CanvasText !important;
    color: CanvasText !important;
  }
  html .stat.featured :is(.number, label, .caption, .stat-icon) {
    background: Canvas !important;
    color: CanvasText !important;
  }
}