/* ============================================================================
   SNOWLINE — DESIGN TOKENS
   Nadia Sørhaug · v1.0 · July 16, 2026
   ----------------------------------------------------------------------------
   The single source of truth for the game's look. Elias: drop this into
   artifacts/app/renderer/ and link it FIRST in index.html, before any other
   stylesheet. Everything the renderer draws in DOM/CSS reads these custom
   properties; the Canvas layer reads the matching JS constants in
   renderer/palette.js (mirror of the --sl-canvas-* values below — keep them
   in sync; this file is authoritative).

   Fonts are bundled LOCALLY (offline law, no CDN). See the @font-face block
   and the font-fetch note at the bottom.

   The palette is SEASONAL. The play surface lives inside a container that
   carries a season class — .season-spring / -summer / -autumn / -winter — set
   by the engine at each season turn (design doc §8.8: "the whole palette shifts,
   autumn warms, winter cools to blue"). Season classes override the ambient
   ground + accent temperature ONLY; the warm lamplight family never goes cold.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TYPEFACES  (bundled — files live in renderer/fonts/)
   --------------------------------------------------------------------------- */

/* Fraunces — the warm, wonky soft-serif. Display: wordmark, treasury numerals,
   season-card & annual-report headings. Cooper/Windsor lineage = lamplight warmth.
   Variable font; we drive opsz + SOFT for the cozy hand. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces[SOFT,WONK,opsz,wght].woff2") format("woff2-variations"),
       url("fonts/Fraunces[SOFT,WONK,opsz,wght].ttf")   format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap; /* local & offline; swap = instant warm-native fallback if the
                         woff2 isn't fetched yet (bin/fetch-fonts.sh), never invisible text */
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-Italic[SOFT,WONK,opsz,wght].woff2") format("woff2-variations"),
       url("fonts/Fraunces-Italic[SOFT,WONK,opsz,wght].ttf")   format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Work Sans — humanist UI sans. Warm and friendly, not clinical like Inter.
   Body, labels, tooltips, run cards, buttons, all small numeric readouts
   (it has proper tabular figures — Fraunces' figures are too delicate small). */
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans[wght].woff2") format("woff2-variations"),
       url("fonts/WorkSans[wght].ttf")   format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Italic[wght].woff2") format("woff2-variations"),
       url("fonts/WorkSans-Italic[wght].ttf")   format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. COLOR — the base palette (season-neutral spine)
   Warm lamplight golds/hearth-oranges vs cold blue-grey snow & slate.
   Hex is the contract; use the tokens, never raw hex, in component CSS.
   --------------------------------------------------------------------------- */
:root {
  /* — WARM: lamplight, hearth, money, the "alive" family. Never goes cold. — */
  --sl-hearth:        #E8A54B; /* primary warm accent — lamp glow, active tool, treasury up-tick */
  --sl-gold:          #F2C879; /* lighter warm — highlights, hover, glints */
  --sl-ember:         #D07A3C; /* deep warm — pressed states, freight, strong warm edges */
  --sl-cream:         #F6EBD4; /* warm paper white — panel text on dark, warm-lit surfaces */
  --sl-lamp-glow:     rgba(242, 200, 121, 0.55); /* the soft halo used behind lamps/glints */

  /* — COOL: snow, slate, night. The calm ground the warmth sits against. — */
  --sl-snow:          #E4ECF1; /* brightest cool — high snow, top-bar text on dark */
  --sl-snow-blue:     #C6D4DC; /* cold snow blue-grey — the signature cold */
  --sl-slate:         #4A5D68; /* slate mountain — mid terrain, borders on light */
  --sl-slate-deep:    #33454F; /* deeper slate — panel bodies, shadow terrain */
  --sl-night:         #1E3A47; /* deep teal-navy — the twilight ground, darkest UI base */
  --sl-night-deep:    #162A34; /* deepest — modal scrim base, canvas void */

  /* — INK: type colors — */
  --sl-ink:           #22333C; /* primary text on light/cream surfaces */
  --sl-ink-soft:      #5A6E78; /* secondary text, captions, muted labels */
  --sl-ink-faint:     #92A4AD; /* tertiary — disabled, placeholder, fine print */
  --sl-ink-on-dark:   #EAF1F5; /* primary text on night/slate surfaces */
  --sl-ink-on-dark-soft: #A9BCC6; /* secondary text on dark */

  /* — PINE / nature accents (villages, terrain detail) — */
  --sl-pine:          #2E4A3E; /* snow-dusted pines, produce chips (timber) */
  --sl-dusk-rose:     #C98B7A; /* soft horizon rose — a rare warm-cool bridge tint */

  /* — STATUS: legible, never alarming (cozy law — §8.8) — */
  --sl-ok:            #6FA88A; /* clear / green schedule / solvent — muted sage, warm-leaning */
  --sl-warn:          #E8A54B; /* amber warning (= hearth) — "watch this", queued run, near capacity */
  --sl-warn-deep:     #C9862E; /* stronger amber */
  --sl-alert:         #C6543F; /* the ONLY red — deadlock, over-capacity spiral, debt.
                                  Muted brick-red, never fire-engine. Used sparingly. */
  --sl-alert-soft:    rgba(198, 84, 63, 0.16); /* alert fills/pulses */

  /* ---------------------------------------------------------------------------
     3. AMBIENT GROUND + SEASON TEMPERATURE
     These four re-point per season. Default (no season class) = spring.
     The engine sets the season class on the play container; CSS transitions
     glide the shift over ~1.2s (§8.8 "atmosphere, not a jolt").
     --------------------------------------------------------------------------- */
  --sl-ground:        var(--sl-night);      /* the app background wash */
  --sl-ground-2:      var(--sl-night-deep); /* the deeper vignette edge */
  --sl-ambient-accent: var(--sl-hearth);    /* the season's accent temperature */
  --sl-sky-horizon:   var(--sl-dusk-rose);  /* horizon tint in atmosphere layers */

  /* ---------------------------------------------------------------------------
     4. CANVAS palette (mirror in renderer/palette.js — see note)
     The Canvas map layer can't read CSS vars; these are the values to hardcode
     as JS constants. Named to match so the map and the chrome are one world.
     --------------------------------------------------------------------------- */
  --sl-canvas-track:        #6E5A46; /* laid track — warm brown sleeper tone */
  --sl-canvas-track-ghost:  #B7A98F; /* the ghost preview line while laying */
  --sl-canvas-track-steep:  #8A6E4E; /* steep-grade track (chevroned in JS) */
  --sl-canvas-node:         #C6D4DC; /* empty junction node ring */
  --sl-canvas-village:      #F2C879; /* village node warm core */
  --sl-canvas-village-ring: #E8A54B; /* village warm ring */
  --sl-canvas-train:        #E8A54B; /* the train mark — a warm dot with a lamp */
  --sl-canvas-train-glow:   #F2C879; /* its lamp */
  --sl-canvas-water:        #9DB6C4; /* frozen lake */
  --sl-canvas-peak:         #4A5D68; /* mountain shading base */
  --sl-canvas-snow:         #DCE6EC; /* snow field on the canvas */

  /* ---------------------------------------------------------------------------
     5. TYPE SCALE & FAMILIES
     --------------------------------------------------------------------------- */
  /* Warm macOS-native fallbacks sit after the bundled families, so the game is
     always warm & legible offline even before bin/fetch-fonts.sh runs:
     Iowan Old Style (warm old-style serif on every Mac) then Palatino/Georgia;
     Avenir Next (warm humanist sans on every Mac) then system. */
  --sl-font-display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, "Times New Roman", serif;
  --sl-font-ui:      "Work Sans", "Avenir Next", "Avenir", -apple-system, "Helvetica Neue", sans-serif;

  /* Fraunces variable-axis presets — the cozy hand. Apply via font-variation-settings. */
  --sl-fraunces-display: "opsz" 144, "SOFT" 60, "WONK" 1, "wght" 560; /* wordmark, big headings */
  --sl-fraunces-numeral: "opsz" 96,  "SOFT" 40, "WONK" 0, "wght" 500; /* treasury § figure */
  --sl-fraunces-heading: "opsz" 72,  "SOFT" 50, "WONK" 0, "wght" 600; /* card/report headings */

  --sl-text-xs:   11px;  /* fine print, folios, chip labels */
  --sl-text-sm:   13px;  /* captions, secondary labels, tooltip body */
  --sl-text-base: 15px;  /* UI body — buttons, panel text, run cards */
  --sl-text-md:   18px;  /* panel titles, tool labels */
  --sl-text-lg:   24px;  /* season/year in top bar, small headings */
  --sl-text-xl:   34px;  /* treasury figure, card heading */
  --sl-text-2xl:  52px;  /* season-card & report title, wordmark */

  --sl-lh-tight: 1.12;
  --sl-lh-snug:  1.32;
  --sl-lh-body:  1.5;

  --sl-tracking-wide:  0.08em;  /* small caps labels, kickers */
  --sl-tracking-micro: 0.14em;  /* the finest all-caps furniture */

  /* ---------------------------------------------------------------------------
     6. SURFACE / SHAPE / DEPTH — soft, rounded, hand-made
     --------------------------------------------------------------------------- */
  --sl-radius-sm:  8px;   /* chips, small buttons */
  --sl-radius-md:  14px;  /* buttons, tool buttons, run cards */
  --sl-radius-lg:  20px;  /* panels, the season card */
  --sl-radius-xl:  28px;  /* large modals, annual report */
  --sl-radius-pill: 999px;

  /* Panel surfaces — warm-tinted darks, never flat black. A hair of warmth in
     every "dark" so nothing reads clinical. */
  --sl-surface:        #233A45;  /* standard panel body (night + a warm lift) */
  --sl-surface-raised: #2C4753;  /* raised — hovered card, tool rail */
  --sl-surface-cream:  #F6EBD4;  /* the warm-paper surface — season card, report */
  --sl-surface-cream-2:#EFE0C4;  /* cream shade — report sidebars, table stripes */

  --sl-border:        rgba(198, 212, 220, 0.14); /* hairline on dark surfaces */
  --sl-border-warm:   rgba(232, 165, 75, 0.38);  /* warm border — active/selected */
  --sl-border-cream:  rgba(74, 93, 104, 0.18);   /* hairline on cream surfaces */

  /* Shadows — soft, warm-tinted, low. Cozy depth, not material-design harsh. */
  --sl-shadow-sm:  0 2px 6px rgba(15, 28, 34, 0.28);
  --sl-shadow-md:  0 8px 22px rgba(15, 28, 34, 0.34);
  --sl-shadow-lg:  0 18px 48px rgba(15, 28, 34, 0.44);
  --sl-shadow-warm: 0 4px 20px rgba(232, 165, 75, 0.30); /* the glow under a warm/active element */
  --sl-glow-lamp:  0 0 24px 4px var(--sl-lamp-glow);     /* the lamp halo for feedback moments */

  /* Grain overlay opacity (a subtle paper tooth ties the flat art to the UI) */
  --sl-grain: 0.045;

  /* ---------------------------------------------------------------------------
     7. MOTION — gentle, never snappy-corporate
     --------------------------------------------------------------------------- */
  --sl-ease-soft:  cubic-bezier(0.32, 0.72, 0, 1);      /* the house ease — settled, calm */
  --sl-ease-gentle: cubic-bezier(0.4, 0.0, 0.2, 1);
  --sl-dur-quick:  140ms;  /* hover, press */
  --sl-dur-panel:  320ms;  /* panels slide in */
  --sl-dur-season: 1200ms; /* the palette shift on season turn */
  --sl-dur-float:  1600ms; /* the § figure floating up on a delivery */

  /* ---------------------------------------------------------------------------
     8. LAYOUT METRICS (see spec §4 for the full geometry)
     --------------------------------------------------------------------------- */
  --sl-topbar-h:   64px;
  --sl-toolrail-w: 72px;   /* icon rail; 220px when expanded/labeled */
  --sl-panel-w:    340px;  /* right context panel */
  --sl-runstrip-h: 104px;  /* bottom run strip */
  --sl-gutter:     16px;
  --sl-inset:      20px;   /* the play surface sits this far off the window edge */
}

/* ---------------------------------------------------------------------------
   9. SEASON OVERRIDES — set the class on the play container.
   Only the ambient temperature moves; the lamplight warm family is constant.
   (§8.8: autumn warms, winter cools to blue.)
   --------------------------------------------------------------------------- */
.season-spring {
  --sl-ground:        #1E3A47;  /* teal-navy, fresh */
  --sl-ground-2:      #162A34;
  --sl-ambient-accent: #E8A54B;
  --sl-sky-horizon:   #C98B7A;  /* soft rose dawn */
  --sl-canvas-snow:   #DCE6EC;
}
.season-summer {
  --sl-ground:        #234A52;  /* a touch greener/warmer teal, longer light */
  --sl-ground-2:      #17323A;
  --sl-ambient-accent: #F2C879;
  --sl-sky-horizon:   #E8A54B;  /* warm gold horizon */
  --sl-canvas-snow:   #E7EEF2;  /* thawed, brightest */
}
.season-autumn {
  --sl-ground:        #35323A;  /* warms — plum-slate, low amber light */
  --sl-ground-2:      #241F26;
  --sl-ambient-accent: #D07A3C;  /* ember — the autumn warm */
  --sl-sky-horizon:   #C9862E;
  --sl-canvas-snow:   #E4E4E0;  /* frost, warm-grey */
}
.season-winter {
  --sl-ground:        #13232E;  /* cools to deep blue — the cold room */
  --sl-ground-2:      #0D1A23;
  --sl-ambient-accent: #E8A54B;  /* the lamp is MORE precious against the cold — still warm */
  --sl-sky-horizon:   #4A5D68;  /* cold slate horizon, no rose */
  --sl-canvas-snow:   #CFDEE8;  /* coldest blue snow */
}

/* Smooth the season shift wherever these grounds are painted */
.play-surface,
.play-surface .season-tinted {
  transition: background-color var(--sl-dur-season) var(--sl-ease-soft),
              color var(--sl-dur-season) var(--sl-ease-soft);
}

/* ============================================================================
   10. ENGINE COMPATIBILITY ALIASES  (Nadia ↔ Elias contract reconciliation)
   ----------------------------------------------------------------------------
   renderer/ui.css was authored against an earlier token vocabulary before this
   spec landed. Rather than churn Elias's ui.css mid-build, this block ALIASES
   every name his ui.css consumes onto the canonical design values above, so the
   real game renders as designed work with zero edits to ui.css. Canonical
   tokens (§2–§8) remain authoritative; these are a thin translation layer.

   IMPORTANT reading rule this fixes: ui.css sets body/panel text in --sl-ink on
   DARK cozy panels. In the canonical palette --sl-ink (#22333C) is dark ink for
   CREAM surfaces — so on ui.css's dark panels it would render near-invisible.
   These aliases therefore point --sl-ink at the LIGHT on-dark ink, which is the
   correct reading for ui.css's dark-panel layout. (When a surface is genuinely
   the warm-paper card — season card / annual report — use --sl-surface-cream +
   --sl-ink directly per §5.7–5.8; see the note to Elias in the handoff.)
   --------------------------------------------------------------------------- */
:root {
  /* — type — */
  --sl-font-text: var(--sl-font-ui);
  --sl-fs-body:   var(--sl-text-base); /* 15px */
  --sl-fs-small:  var(--sl-text-sm);   /* 13px */
  --sl-fs-tiny:   var(--sl-text-xs);   /* 11px */
  --sl-fs-title:  var(--sl-text-md);   /* 18–20px panel titles */

  /* — grounds & surfaces — */
  --sl-bg-deep:     var(--sl-night-deep); /* app base / start-screen ground */
  --sl-bg-2:        var(--sl-night);      /* input fills, secondary ground */
  --sl-panel:       var(--sl-surface);       /* standard dark cozy panel */
  --sl-panel-warm:  var(--sl-surface-raised);/* raised / modal / card panel */
  --sl-panel-edge:  var(--sl-border);        /* hairline on dark surfaces */
  --sl-panel-glow:  rgba(232, 165, 75, 0.30);/* the warm glow (matches --sl-shadow-warm color) */

  /* — ink (see reading rule above: these ride ui.css's DARK panels) — */
  --sl-ink:      var(--sl-ink-on-dark);      /* primary text on dark panels */
  /* --sl-ink-soft already canonical (#5A6E78) — fine as secondary on dark; keep */
  --sl-ink-mute: var(--sl-ink-on-dark-soft); /* tertiary / muted on dark */

  /* — warm accents (the lamplight) — */
  --sl-lamp:        var(--sl-hearth); /* primary warm — active, treasury, CTA */
  --sl-lamp-bright: var(--sl-gold);   /* brighter warm — highlights, treasury figure */
  /* --sl-hearth, --sl-ember, --sl-ok, --sl-warn already canonical — used as-is */
  --sl-bad:         var(--sl-alert);  /* the muted brick-red, cozy 'never fire-engine' */

  /* — shape — */
  --sl-r:     var(--sl-radius-md); /* 14px workhorse */
  --sl-r-sm:  var(--sl-radius-sm); /* 8px */
  --sl-r-lg:  var(--sl-radius-lg); /* 20px panels */

  /* — depth — */
  --sl-shadow:      var(--sl-shadow-lg);
  --sl-shadow-soft: var(--sl-shadow-sm);

  /* — good-color chips (design-spec §6.3): ui.js chip() reads --good-<key> — */
  --good-passengers: var(--sl-cream);  /* cream — the bread-and-butter good */
  --good-timber:     var(--sl-pine);   /* pine green */
  --good-ore:        var(--sl-ember);  /* deep warm ember — heavy, high value */
  --good-mail:       var(--sl-slate);  /* slate — small, steady */
}

/* ---------------------------------------------------------------------------
   11. WARM-PAPER CARDS — season card as a 'letter arriving' (design-spec §5.7)
   ui.css builds #season-card on the dark panel tokens with a gold heading; on
   the bright winter valley that heading washed out (low contrast). This scoped
   block re-points the card to the true warm-PAPER surface with dark ink — the
   tonal inverse of the play surface, so it reads like a calm calendar letter,
   exactly as the spec intends — without editing ui.css. Only the card is scoped;
   the run-builder/shop modals stay dark on purpose.
   --------------------------------------------------------------------------- */
#season-card {
  background: var(--sl-surface-cream) !important;   /* warm paper */
  border-color: var(--sl-border-warm) !important;
}
#season-card .sc-season { color: var(--sl-ember) !important; }   /* warm dark heading on cream */
#season-card .sc-forecast { color: var(--sl-ink) !important; }   /* dark ink body on cream */
#season-card .sc-summary { color: var(--sl-ink-soft) !important; }

/* ============================================================================
   FONT FETCH NOTE — for Elias's build (offline: files MUST be bundled locally)
   Download these into artifacts/app/renderer/fonts/ at build time (they are
   SIL Open Font License — free to bundle & redistribute with the app):

   Fraunces (undercasetype/Fraunces, master/fonts/):
     variable/Fraunces[SOFT,WONK,opsz,wght].ttf
     variable/Fraunces-Italic[SOFT,WONK,opsz,wght].ttf
     webfonts/variable/*.woff2  (matching names)
     https://github.com/undercasetype/Fraunces  (fonts/ dir)

   Work Sans (weiweihuanghuang/Work-Sans, master/fonts/variable/):
     WorkSans[wght].ttf,  WorkSans-Italic[wght].ttf
     webfonts: WorkSans[wght].woff2, WorkSans-Italic[wght].woff2
     https://github.com/weiweihuanghuang/Work-Sans

   Also copy each family's OFL.txt LICENSE into renderer/fonts/ (OFL bundling
   condition). Ship woff2 (small) + ttf fallback. If you only fetch ttf, drop
   the woff2 src line — the ttf-variations line alone works in Electron/Chromium.
   ============================================================================ */