/* Sunsite — Blueprint design tokens (Plan_FrontendUpdate FE.1).
   Ported from docs/design/frontend/css/blueprint.css; source of truth for the
   values is docs/design/styles/Design_Styles_Oct2026.md → Decision.

   Theme: follows the OS (prefers-color-scheme) unless <html data-theme="light|dark">
   pins it. The --c-* tokens are read by the server-rendered charts
   (solarcalc/plotting/_svg.py skin()), which keep their old hex as a fallback. */

/* IBM Plex, self-hosted (SIL OFL 1.1, fonts/OFL.txt): no third-party request. */
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-400-normal.4ffb7d182092.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-500-normal.3e004a32dd0d.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-600-normal.797ce816915b.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-700-normal.d1232be26d34.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.e57e037d7417.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600-normal.46e420906513.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  /* FE.7 contrast pass: every text token ≥ 4.5:1 on paper, sheet and fill in both themes
     (calculator/test_frontend_a11y.py) — muted, mark and ok darkened from the prototype. */
  --paper: #f4f8fc; --sheet: #ffffff; --ink: #0b2a4a; --muted: #52698a; --line: #b9cde3; --grid: #e3edf7;
  --accent: #0a62c9; --on-accent: #ffffff; --mark: #b84a0c; --ok: #17723f; --bad: #c92a2a; --fill: #e6f0fb;
  /* Chart tokens — semantic roles from solarcalc/plotting/palette.py, Blueprint hues */
  --c-solar: #e3a008; --c-battery: #0a62c9; --c-import: #d9480f; --c-charge: #7048e8; --c-export: #1b7f4b;
  --c-charge2: #0c8a6a; --c-discharge: #4c4fd9; --c-cash: #0b7fae; --c-gridin: #8aa0b8;
  --c-ink: #0b2a4a; --c-label: #24476d; --c-muted: #5a7390; --c-grid: #b9cde3; --c-hole: #ffffff;
  --c-font: "IBM Plex Sans Condensed", system-ui, sans-serif;
  --font: "IBM Plex Sans Condensed", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --maxw: 1040px;
  /* Control sizes (TODO styling fix: buttons were too small). Default ≈ 44px touch
     target; sm ≈ 36px for dense rows (tables, header); lg ≈ 52px for hero CTAs. */
  --ctl-h-sm: 2.25rem; --ctl-h: 2.75rem; --ctl-h-lg: 3.25rem;
}
:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0a1d33; --sheet:#0d2440; --ink:#dbe9f8; --muted:#8fb0d2; --line:#2b4f78; --grid:#123056;
    --accent:#6db3ff; --on-accent:#0a1d33; --mark:#ff9b5e; --ok:#6fd39d; --bad:#ff8787; --fill:#123a66;
    --c-solar:#ffc94d; --c-battery:#6db3ff; --c-import:#ff8a4c; --c-charge:#b197fc; --c-export:#6fd39d;
    --c-charge2:#5fd3b0; --c-discharge:#9ea1ff; --c-cash:#5cc8f0; --c-gridin:#7d93ab;
    --c-ink:#dbe9f8; --c-label:#b8d0ea; --c-muted:#8fb0d2; --c-grid:#2b4f78; --c-hole:#0d2440;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#0a1d33; --sheet:#0d2440; --ink:#dbe9f8; --muted:#8fb0d2; --line:#2b4f78; --grid:#123056;
  --accent:#6db3ff; --on-accent:#0a1d33; --mark:#ff9b5e; --ok:#6fd39d; --bad:#ff8787; --fill:#123a66;
  --c-solar:#ffc94d; --c-battery:#6db3ff; --c-import:#ff8a4c; --c-charge:#b197fc; --c-export:#6fd39d;
  --c-charge2:#5fd3b0; --c-discharge:#9ea1ff; --c-cash:#5cc8f0; --c-gridin:#7d93ab;
  --c-ink:#dbe9f8; --c-label:#b8d0ea; --c-muted:#8fb0d2; --c-grid:#2b4f78; --c-hole:#0d2440;
}