/* ─── Run Sheet design tokens ────────────────────────────────────────────────
   The ONE place the new look's colours, type, radii and spacing live.

   Palette: Ember (DESIGN.md round 4), the default and only live palette.
   To swap palettes, replace the values in the "Palette" block below (and the
   night block); nothing else in the codebase names a Run Sheet hex value.
   JS reads these through T / tok() in app/src/31-rs-tokens.jsx.

   Every custom property is prefixed --rs- because the classic stylesheet in
   index.html already owns --s1..--s8 (spacing) and --c-* (colours). The
   classic UI never reads --rs-*, so this file is inert for it.

   Fonts are self-hosted (Google Fonts responses are cross-origin and the
   service worker only caches same-origin shell files, so they would not work
   offline). Latin subset: covers English and French. SIL OFL, see fonts/OFL.txt.
   Browsers only download a face when text actually uses it, so classic users
   never fetch these. */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/app/fonts/barlow-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/app/fonts/barlow-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/app/fonts/barlow-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/app/fonts/barlow-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/app/fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2'); }

:root {
  /* ── Palette: Ember ─────────────────────────────────────────────── */
  --rs-bg: #0C0B0A;                       /* ground */
  --rs-s1: #161412;                       /* card */
  --rs-s2: #1C1916;                       /* raised */
  --rs-s3: #231F1B;
  --rs-s4: #2B2621;
  --rs-line: #2E2924;
  --rs-line2: #3B352F;
  --rs-tx: #F3EEE8;                       /* text */
  --rs-dim: #B3AA9F;
  --rs-mute: #978E84;
  --rs-acc: #DC8234;                      /* the one action colour */
  --rs-acc-ink: #1A0D03;                  /* text on the action colour, 6.61:1 */
  --rs-acc-soft: rgba(220, 130, 52, .14);
  --rs-ok: #3DD68C;                       /* running / flowing */
  --rs-bad: #FF5B4F;                      /* fault / leak / not saved */
  --rs-bad-soft: rgba(255, 91, 79, .12);
  --rs-ice: #7CC0FF;                      /* freeze */
  --rs-ice-soft: rgba(124, 192, 255, .12);
  --rs-sap: #4FA9DC;                      /* sap in tanks */
  --rs-sap2: #1F6F9E;
  --rs-syrup: #B8772B;
  --rs-bar: #D2792F;                      /* chart orange (bars, goal ring) */
  --rs-run: #4599C9;                      /* run-weather strip */
  /* Stage tiles: colour means stage family, always (DESIGN.md round 2) */
  --rs-t-weather: #3F6FE0;
  --rs-t-tap: #2F9E5E;
  --rs-t-lines: #B0458E;
  --rs-t-collect: #1C8BC9;
  --rs-t-boil: #7650E0;
  --rs-t-recap: #0F9C9C;
  --rs-t-power: #4F4740;
  --rs-t-bad: #C83A31;
  --rs-t-ice: #3F6FE0;
  --rs-on-tile: #FFFFFF;                  /* glyph on a stage tile */
  /* Vacuum ramp, 16 to 26 inHg */
  --rs-vac-0: #2D5E6E; --rs-vac-1: #357E93; --rs-vac-2: #3F9FB8; --rs-vac-3: #58BDD6; --rs-vac-4: #8ADBEE;
  /* Drawn map ground */
  --rs-map-g: #12110E; --rs-map-c: #211E19; --rs-map-t: #A99F8F;
  /* Bush map on real imagery (Phases 7-8): tree dots, the GPS dot, and the tone that sits imagery in the dark UI */
  --rs-map-tree: #D7EBDD; --rs-map-treeline: #0E1A14; --rs-gps: #4C9BFF; --rs-leak-ink: #1A0605;
  --rs-map-tone: brightness(.58) saturate(.62) contrast(1.08);


  /* ── Phase 5-6: drawings (evaporator, tanks, charts), grades, sheets ── */
  --rs-fire-a: #FFC061; --rs-fire-b: #D2492B;             /* firebox glow */
  --rs-sap-lt: #8FC9E6; --rs-syrup-lt: #C9A45C;           /* flue pan gradient, sap to syrup */
  --rs-steam: #E4EEF1; --rs-bubble: #EAF3F6;
  --rs-ev-pan: #A39E97; --rs-ev-arch: #211E1A; --rs-ev-edge: #4A433B; --rs-ev-rib: #2B2621;
  --rs-ev-door: #16130F; --rs-ev-door-edge: #5A5248; --rs-ev-valve: #B3AA9F;
  --rs-tank-bg: #100E0C; --rs-tank-wall: #4A433B; --rs-tank-tick: #6B6258; --rs-tank-hi: #BFE3F5;
  --rs-conc: #6FB0C9; --rs-conc2: #8A6A35;                /* concentrate tank fill */
  --rs-hatch: #3B352F; --rs-strip-some: #4599C9; --rs-strip-none: #5A5248;
  --rs-grade-1: #EDE3C8; --rs-grade-2: #E3B45E; --rs-grade-3: #A8712F; --rs-grade-4: #5E3A1C; --rs-grade-x: #6B6258;
  /* Collection point colours: the exact values LogTab assigns (stored in sg_cpoints) */
  --rs-pt-0: #ff7b54; --rs-pt-1: #a78bfa; --rs-pt-2: #f472b6; --rs-pt-3: #34d399; --rs-pt-4: #fbbf24; --rs-pt-5: #60a5fa;
  --rs-scrim: rgba(4, 3, 2, .66); --rs-shadow: rgba(0, 0, 0, .45); --rs-on-ok: #06140C;
  --rs-boilh: 900px;
  --rs-boilph: 600px;   /* the boil photo while a boil runs: the numbers sit on the steam */

  /* ── Type ───────────────────────────────────────────────────────── */
  --rs-f: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rs-fc: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;   /* tracked caps labels only */
  --rs-t-label: 12px;  --rs-t-meta: 14px;  --rs-t-sub: 15px;  --rs-t-body: 17px;
  --rs-t-row: 18px;    --rs-t-card: 20px;  --rs-t-sheet: 26px;
  --rs-t-push: 34px;   --rs-t-root: 44px;

  /* ── Shape and density (8px grid) ───────────────────────────────── */
  --rs-r-card: 20px;  --rs-r-ctl: 14px;  --rs-r-chip: 10px;
  --rs-sp1: 4px; --rs-sp2: 8px; --rs-sp3: 12px; --rs-sp4: 16px; --rs-sp6: 24px; --rs-sp8: 32px;
  --rs-hit: 44px;      /* minimum target */
  --rs-hit-primary: 60px;

  /* ── Shell metrics ──────────────────────────────────────────────── */
  --rs-top: calc(env(safe-area-inset-top, 0px) + 14px);
  --rs-bot: env(safe-area-inset-bottom, 0px);
  --rs-nav: 68px;      /* bottom tab bar height (0 when the side nav takes over) */
  --rs-navw: 0px;      /* side nav width */
  --rs-heroh: 236px;   /* photo header height */
}

/* After-dark variant (Ember night). Applied by adding data-night to <html>. */
:root[data-night] {
  --rs-bg: #070605; --rs-s1: #100E0C; --rs-s2: #15120F; --rs-s3: #1A1714; --rs-s4: #211D19;
  --rs-line: #221E1A; --rs-tx: #E2DCD4; --rs-dim: #A69D92; --rs-mute: #8E857B; --rs-acc: #C9742B;
}

@media (min-width: 760px)  { :root { --rs-heroh: 300px; --rs-boilh: 960px; --rs-boilph: 680px; } }
@media (min-width: 1100px) { :root { --rs-nav: 0px; --rs-navw: 108px; --rs-heroh: 330px; } }
@media (min-width: 1400px) { :root { --rs-navw: 236px; } }