/**
 * ESS Suite design tokens — the single source of truth for the suite's look.
 *
 * Served from the Pages root (like /suite-nav.js) and linked by every shell
 * page; the React apps consume the same values through their Tailwind themes.
 * This replaced an identical `:root` block copy-pasted into eight pages, which
 * is how the suite ended up with three different visual identities.
 *
 * Palette: Eastern Shore coast — sand ground, deep-navy ink, ocean-teal accent,
 * sea-foam highlight. Type: Fraunces (display) + Instrument Sans (body).
 */

:root {
  /* Brand */
  --teal: #0d98ba;
  --teal-deep: #0a7e9b;
  --navy: #1d3557;
  --navy-ink: #14263f;
  --sand: #f7f3e9;
  --sand-warm: #f2ecdd;
  --foam: #a8dadc;

  /* Derived surfaces + text */
  --ground: var(--sand);
  --card: #ffffff;
  --ink: var(--navy);
  --soft: rgba(29, 53, 87, 0.64);
  --line: rgba(29, 53, 87, 0.12);

  /* Semantic (state) — deliberately distinct from the brand accent */
  --ok: #2fbf71;
  --warn: #e0a458;
  --bad: #d9737a;
  --ok-bg: rgba(65, 179, 163, 0.16);
  --warn-bg: rgba(224, 164, 88, 0.18);
  --bad-bg: rgba(224, 90, 90, 0.14);

  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 99px;
}

/* --------------------------- shared primitives --------------------------- */

.suite-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.suite-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--teal), var(--teal-deep));
  color: #fff;
  font-family: var(--serif);
  font-weight: 550;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
  flex: none;
}
.suite-brand b {
  font-family: var(--serif);
  font-weight: 550;
  font-size: 1.05rem;
}

.suite-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
}

.suite-btn {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.suite-btn--primary { background: var(--teal); color: #fff; }
.suite-btn--ghost {
  background: none;
  border: 1.5px solid var(--line);
  color: var(--ink);
}
.suite-btn--ghost:hover { border-color: var(--teal); color: var(--teal-deep); }

.suite-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.5rem;
  background: var(--sand-warm);
  color: var(--soft);
}
.suite-tag--ok { background: var(--ok-bg); color: #1d6a5e; }
.suite-tag--warn { background: var(--warn-bg); color: #8a5a13; }

/* Respect reduced-motion everywhere the suite animates. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}