/*
 * Shared design tokens + page styling for Prideraiser Health.
 *
 * These mirror the heartbeat check board (hb.dryan.tech/static/embed.js) so our
 * own widgets sit next to the embedded <hb-project> card without a visual seam.
 * The heartbeat element hard-codes these values on its shadow :host, so if it
 * ever re-tokenises, update the matching values here by hand.
 */

:root {
  /* Open Color status hues — identical to the heartbeat board. */
  --pr-green: #2f9e44;
  --pr-red: #e03131;
  --pr-yellow: #f08c00;
  --pr-surface: #fff;
  --pr-page: #f8f9fa;
  --pr-text: #212529;
  --pr-dim: #868e96;
  --pr-border: #e9ecef;
  --pr-radius: 1rem;
  --pr-shadow:
    0 3px 5px -2px rgb(0 0 0 / 10%), 0 7px 14px -5px rgb(0 0 0 / 10%);
  --pr-fs-0: 0.75rem;
  --pr-fs-1: 0.875rem;
  --pr-fs-2: 1rem;
  --pr-size-1: 4px;
  --pr-size-2: 8px;
  --pr-size-3: 16px;
  --pr-size-4: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pr-green: #69db7c;
    --pr-red: #ff8787;
    --pr-yellow: #ffd43b;
    --pr-surface: #212529;
    --pr-page: #1a1d20;
    --pr-text: #f1f3f5;
    --pr-dim: #868e96;
    --pr-border: #343a40;
  }
}

:root[data-theme="dark"] {
  --pr-green: #69db7c;
  --pr-red: #ff8787;
  --pr-yellow: #ffd43b;
  --pr-surface: #212529;
  --pr-page: #1a1d20;
  --pr-text: #f1f3f5;
  --pr-dim: #868e96;
  --pr-border: #343a40;
}

/*
 * Pull Pico onto the same neutral grey ground the board assumes. Matches Pico's
 * own selector specificity so these win in every colour-scheme state; the values
 * are theme-aware via the --pr-* tokens above.
 */
:root:not([data-theme]),
:root[data-theme="light"],
:root[data-theme="dark"] {
  --pico-background-color: var(--pr-page);
  --pico-color: var(--pr-text);
  --pico-h1-color: var(--pr-text);
  --pico-h2-color: var(--pr-text);
  --pico-h3-color: var(--pr-text);
  --pico-h4-color: var(--pr-text);
  --pico-h5-color: var(--pr-text);
  --pico-h6-color: var(--pr-text);
  --pico-muted-color: var(--pr-dim);
  --pico-muted-border-color: var(--pr-border);
  --pico-card-background-color: var(--pr-surface);
  --pico-card-sectioning-background-color: var(--pr-surface);
  --pico-card-border-color: var(--pr-border);
}

/* Headings: the board's heading treatment (tight tracking, heavy weight). */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.02em;
}

pr-section-title h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

/*
 * Reserve the server board's typical height (section title + one row of cards
 * on a desktop-width grid) so the page doesn't jump when the fetch resolves and
 * the cards replace the "Loading…" line. A loaded card is a fixed set of rows,
 * ~17rem tall regardless of the server; only the column count varies with
 * viewport, and one row is the common case here.
 */
pr-server-statuses {
  display: block;
  min-block-size: 20rem;
}

.pr-status-dot {
  display: inline-block;
  inline-size: 0.6em;
  block-size: 0.6em;
  margin-inline-end: 0.4em;
  vertical-align: middle;
  border-radius: 50%;
}

.pr-status-dot.passing {
  background: var(--pr-green);
}

.pr-status-dot.failing {
  background: var(--pr-red);
}

.pr-status-dot.unknown {
  background: var(--pr-yellow);
}