/* ── House style — canonical design tokens ──────────────────────────────────
 *
 * THE single source of truth for how everything looks. The spec (what each
 * token means, per-app status, migration notes) is 06-app/design-system.md.
 *
 * Published at /theme.css. The portal links it directly; every published tool
 * gets it injected BEFORE its own <style>, so a tool's local styles still win.
 * That is deliberate: tools that carry their own inline :root block keep
 * working offline and keep their current look until they are migrated — a
 * tool drops its local :root block whenever it's next touched, and from then
 * on this file governs it.
 *
 * The look — "Mist" (ruling 2026-10-24, from an operator-supplied reference):
 * near-black ground, cool slate surfaces, one steel-blue accent, light-weight
 * headlines, small uppercase mono labels. Dark only. Calm, technical, quiet.
 */

/* Mist type: Inter (UI + headlines) and JetBrains Mono (labels, figures).
   Poppins stays imported ONLY for tools still on the legacy light palette —
   their inline :root still names it. Browsers download a family's font files
   only when text actually uses it, so a page pays for the families it uses
   and nothing else. Drop the Poppins import once the last tool migrates. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* NOT here, on purpose: `color-scheme: dark` and a global focus-ring rule.
   This file is injected into every tool, and the legacy light tools don't
   override either — they would get dark scrollbars and form controls, and a
   pale focus ring on white. A Mist page sets both in its own stylesheet (see
   launchpad/index.html). Tokens and opt-in classes only, below. */
:root {
  /* surfaces — darkest to lightest */
  --bg: #0a0d0c;            /* page ground — near-black */
  --inset: #0e1211;         /* inputs, wells, code */
  --panel: #111514;         /* cards / panels */
  --panel-2: #171d1c;       /* hovered / raised panel */

  /* text */
  --ink: #eff1f0;           /* primary text — off-white, never pure #fff */
  --ink-2: #b4babd;         /* secondary text */
  --ink-3: #8b979b;         /* tertiary / hints / mono labels */

  /* lines */
  --line: #263034;          /* borders, input outlines */
  --line-2: #1c2427;        /* subtle rules, row dividers, chart gridlines */

  /* the one accent — steel blue */
  --accent: #476273;        /* FILLS: primary buttons, active states, marks */
  --accent-ink: #9fc1d4;    /* the accent as TEXT / icons / focus rings */
  --accent-soft: #18262c;   /* accent wash behind selected rows, chips */

  /* the two supporting tones — tags and chips only, never UI chrome */
  --warm: #54493a;          /* khaki fill: waiting / needs-you / attention */
  --warm-ink: #e3d3b0;      /* text on --warm, or warm text on panels */
  --teal: #2f4f52;          /* deep teal fill: calm / secondary category */
  --teal-ink: #cfe3e3;      /* text on --teal */

  /* status — every status ALSO carries a text label, never colour alone */
  --good: #86c5a4;
  --warn: #e2c27a;
  --crit: #e59a9a;

  /* semantic series colours — use these in EVERY chart, never invent new.
     NOTE: these values were tuned on the legacy LIGHT palette. They are kept
     unchanged on purpose rather than re-picked by eye: the first tool that
     draws charts on Mist re-validates them for a dark ground (contrast
     against --panel, lightness separation between series) and updates them
     here, in one place. Until then, treat them as provisional on dark. */
  --s-solar: #eda100;       /* PV generation */
  --battery: #1a6a64;       /* BESS */
  --battery-soft: #dcefed;
  --s-line: #2a78d6;        /* grid / load lines */
  --s-export: #1baf7a;      /* export / self-consumed / positive energy */
  --s-demand: #4a3aa7;      /* demand charges */
  --pos: #1baf7a;           /* money in */
  --neg: #e34948;           /* money out */
  --neutral: #d4d6d2;       /* baseline / reference series */

  /* shape & depth */
  --radius: 6px;            /* panels, cards */
  --radius-sm: 4px;         /* buttons, inputs, chips */
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.7);

  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* touch: the minimum hit area for anything you tap (tablet-first) */
  --tap: 44px;

  /* the ground (ruling 2026-10-25): the portal sits on a photograph, so its
     panels are glass — the panel colours at an alpha with the photograph
     blurred behind. Alphas of existing colours only, never a new hue. A legacy
     tool that doesn't use them is unaffected. */
  --glass: rgba(17, 21, 20, .80);          /* --panel at 80% */
  --glass-2: rgba(23, 29, 28, .88);        /* --panel-2 at 88%: hovered glass */
  --glass-line: rgba(159, 193, 212, .12);  /* --accent-ink at 12%: the lit edge */
  --glass-blur: 18px;
}

/* Base layer — only takes effect where a tool doesn't style these itself. */
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Shared component classes — opt-in, for new tools and future refactors. */
.t-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-card {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.t-btn {
  min-height: var(--tap);
  padding: 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.t-btn:hover { border-color: var(--accent-ink); }
.t-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.t-btn.primary:hover { background: #ffffff; }
.t-input {
  min-height: var(--tap);
  padding: 0 14px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
}
.t-input:focus { border-color: var(--accent-ink); }
.t-chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-2);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
}