/* ============================================================
   Snow Flow Co — Design tokens
   Sister brand to River Flow Co: same structure, voice, and type
   pairing (Spectral + Manrope), different palette. Layered dark
   graphite surfaces instead of warm cream paper, one blue accent
   instead of river-blue + rust-gold. Surfaces are a neutral grey
   ramp (zero hue) rather than the original blue-slate, so the
   blue accent reads as the only color in the frame.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── Surfaces (dark, layered light-to-dark by elevation) ── */
  --sf-page:         #1A1B1D; /* page background, hero, band above footer */
  --sf-section-alt:  #212224; /* alternate section background (state browser) */
  --sf-card:         #2A2B2E; /* data card, sidebar panel, search field */
  --sf-card-raised:  #333437; /* clickable cards (featured conditions) */
  --sf-footer:       #131416; /* footer */
  --sf-map-inner:    #212224; /* inside the map frame */

  /* ── Accent ───────────────────────────────────────────── */
  --sf-blue:         #2C7BE5; /* primary: buttons, active chip, dots, live indicator */
  --sf-blue-deep:    #0B4FA8;
  --sf-blue-soft:    #7FB2F0; /* emphasis word, station/resort names, icons, hover borders */
  --sf-blue-tint:    rgba(44, 123, 229, 0.16); /* trend-badge fill, tile hover fill */

  /* ── Text on dark (always white at an alpha, never grey hex) ──
     Biased brighter than the original handoff spec for readability
     at body-copy sizes; only the tiniest micro-labels stay dim. */
  --sf-text:         #FFFFFF;
  --sf-text-body:    rgba(255, 255, 255, 0.88);
  --sf-text-muted:   rgba(255, 255, 255, 0.76);
  --sf-text-label:   rgba(255, 255, 255, 0.70);
  --sf-text-faint:   rgba(255, 255, 255, 0.58);

  /* ── Lines and fills on dark ──────────────────────────── */
  --sf-border:       rgba(255, 255, 255, 0.18);
  --sf-hairline:     rgba(255, 255, 255, 0.2);
  --sf-dashed:        rgba(255, 255, 255, 0.26);
  --sf-chip-fill:    rgba(255, 255, 255, 0.07);
  --sf-chip-border:  rgba(255, 255, 255, 0.24);
  --sf-tile-fill:    rgba(255, 255, 255, 0.06);
  --sf-tile-border:  rgba(255, 255, 255, 0.22);
  --sf-badge-fill:   rgba(255, 255, 255, 0.13);
  --sf-map-border:   rgba(255, 255, 255, 0.32);
  --sf-track-empty:  rgba(255, 255, 255, 0.26);

  /* ── Forecast icon accent ────────────────────────────────
     Warm accent reserved for the sun/lightning glyphs in the
     7-day forecast icons, the one deliberate break from the
     blue-only palette outside of the NAADS scale below. */
  --sf-sun: #F7C55A;

  /* ── Industry-standard avalanche danger scale (NAADS) ────
     Deliberately breaks the monochrome-blue palette: users read
     these as safety-critical, so they must match the standard
     North American Avalanche Danger Scale, not the brand accent. */
  --naads-1-low:          #52A22E;
  --naads-2-moderate:     #FFE900;
  --naads-3-considerable: #F7941D;
  --naads-4-high:         #ED1C24;
  --naads-5-extreme:      #000000;

  /* ── Type ─────────────────────────────────────────────── */
  --sf-serif: "Spectral", Georgia, serif;
  --sf-sans:  "Manrope", system-ui, -apple-system, sans-serif;

  /* ── Motion ───────────────────────────────────────────── */
  --sf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sf-dur-fast: 0.15s;
  --sf-dur: 0.25s;
}