/* Solera brand + design-system base.
 *
 * Shared foundation for any Solera web surface — the on-device controller
 * dashboard and the cloud platform alike: the brand typeface, the color and
 * type tokens, a small reset, and the SOLERA wordmark. App-specific styling
 * layers on top of these tokens.
 *
 * Notes:
 *  - The @font-face URLs are /fonts/*.woff2, so whatever serves this file must
 *    also serve those woff2s at /fonts/.
 *  - A few schematic-named tokens (--vessel, --relay-off*) live here for now so
 *    the palette is in one place; they can be trimmed from the shared base later. */

@font-face {
  font-family: "Objectivity";
  src: url("/fonts/Objectivity-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Objectivity";
  src: url("/fonts/Objectivity-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Objectivity";
  src: url("/fonts/Objectivity-Medium.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Objectivity";
  src: url("/fonts/Objectivity-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Brand */
  --solera-dark-blue: #29357e;
  --solera-royal-blue: #5f77bc;
  --solera-orange: #ee8425;
  --solera-orange-dim: #b5631a;

  /* Dark theme surfaces */
  --bg: #10162e;
  --bg-glow: #18204a;
  --panel: #1b2348;
  --vessel: #222c5c;
  --vessel-stroke: #3a4684;
  --text: #eef1fb;
  --text-dim: #9aa3cc;
  --text-faint: #6f78a6;

  /* Functional encoding */
  --hot: #e8513b;            /* hot fluid — kept distinct from the interactive orange */
  --warm: #f0a23c;           /* warm fluid (e.g. hot-water return) — amber, between cold and hot */
  --cold: #5f8fe0;           /* cold fluid */
  --relay-off: #2b3666;
  --relay-off-stroke: #46538f;
  --ok: #3ea66a;
  --warn: #caa23b;
  --down: #c8503b;

  /* Objectivity is the brand face; until its woff2 is bundled we fall back to
   * geometric faces that ship locally (Avenir/Futura) — closer to Objectivity
   * than system-ui — then generic sans. No web-font CDN (the controller runs offline). */
  --font: "Objectivity", "Avenir Next", "Avenir", "Futura", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  /* no-repeat + viewport-fixed so the glow doesn't tile when content scrolls;
   * solid --bg underneath fills past the gradient rather than repeating it. */
  background: radial-gradient(1100px 700px at 72% -12%, var(--bg-glow), var(--bg)) no-repeat fixed;
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Brand wordmark: SOLERA over SYSTEMS, both white, SYSTEMS letter-spread to span
 * SOLERA's width. .name shrinks to SOLERA's width; SYSTEMS justifies across it. */
.brand { display: flex; align-items: center; gap: 6px; }
/* Optical centering: with the wordmark's box-center sitting slightly above its
 * visible text center, the swirl appears to hang low. Nudge it up so the swirl
 * extends equally above SOLERA and below SYSTEMS. */
.brand .mark { transform: translateY(-2px); }
.brand .name { display: inline-block; line-height: 1; color: #fff; }
.brand .name b { display: block; font-weight: 500; letter-spacing: 0.2em; margin-right: -0.2em; font-size: 19px; }
/* SYSTEMS: per-letter flex distribution spans SOLERA's width in every browser
 * (single-word CSS justify is unreliable). */
.brand .name .sys { display: flex; justify-content: space-between; width: 100%; margin-top: 5px; font-weight: 400; font-size: 11px; }
.brand .name .sys i { font-style: normal; }