/* ==========================================================================
   wx-tokens.css  —  Weather Dashboard design tokens (weather.site1917.com)
   Phase 0 scaffolding. V1 — 2026-07-11.

   Source of truth for colour, type, radius, shadow and spacing.
   Palette + type extracted from "Property Weather Dashboard (standalone).html"
   (inline React style strings) and normalised into CSS custom properties so
   every later phase reads one variable instead of a hard-coded hex.

   Deploy name on server: css/wx-tokens.css
   Cache-bust with ?v=YYYYMMDD-N wherever this is linked (shell + any SW).
   ========================================================================== */

:root {
  /* ---- Surfaces & background ------------------------------------------- */
  --wx-bg:            #eef1f5;   /* app / page background                   */
  --wx-bg-alt:        #f1f4f8;   /* alternate panel background              */
  --wx-surface:       #ffffff;   /* cards, panels                          */
  --wx-surface-2:     #fbfcfd;   /* subtle raised / inset surface          */
  --wx-surface-3:     #f6f8fb;   /* input fills, hover rows                 */

  /* ---- Borders / dividers ---------------------------------------------- */
  --wx-border:        #e3e8ee;   /* default 1px card / control border      */
  --wx-border-soft:   #eef1f5;   /* faint divider                          */
  --wx-border-strong: #d7dee6;   /* emphasised border                      */

  /* ---- Text ------------------------------------------------------------ */
  --wx-text:          #1e2733;   /* primary text / headings                */
  --wx-text-medium:   #475569;   /* body secondary                         */
  --wx-text-muted:    #64748b;   /* labels, captions                       */
  --wx-text-faint:    #94a3b8;   /* de-emphasised / placeholder            */

  /* ---- Brand / accents ------------------------------------------------- */
  --wx-accent:        #2f6bd6;   /* primary blue (interactive, room/farm)  */
  --wx-accent-strong: #1e2733;   /* primary button fill (dark)             */
  --wx-accent-soft:   #eef2fb;   /* active chip / selected tint            */
  --wx-dot:           #3b6fd6;   /* map pin / card dot                     */

  /* ---- Sensor-kind semantic colours ------------------------------------ */
  --wx-station:       #2f83c4;   /* outdoor station series                 */
  --wx-room:          #2f6bd6;   /* indoor room series                     */
  --wx-soil:          #b06a2c;   /* soil moisture / soil temp series       */
  --wx-teal:          #3aa5a0;   /* secondary metric (humidity)            */

  /* ---- Status ---------------------------------------------------------- */
  --wx-good:          #3d9a63;   /* healthy / online                       */
  --wx-warn:          #e0a53f;   /* caution / stale                        */
  --wx-hot:           #e07a3f;   /* high-temp emphasis                     */
  --wx-alert:         #ff8a80;   /* error / offline                        */
  --wx-alert-ink:     #5c2b2e;   /* text on alert backgrounds              */

  /* ---- Typography ------------------------------------------------------ */
  --wx-font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wx-font-ui:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wx-font:       var(--wx-font-mono);   /* app default face             */

  --wx-fs-xs:   12px;
  --wx-fs-sm:   12.5px;
  --wx-fs-base: 13px;
  --wx-fs-md:   14px;
  --wx-fs-lg:   16px;
  --wx-fs-xl:   20px;

  --wx-fw-normal:   400;
  --wx-fw-medium:   500;
  --wx-fw-semibold: 600;

  /* ---- Radii ----------------------------------------------------------- */
  --wx-radius-sm:   6px;
  --wx-radius-md:   8px;
  --wx-radius-lg:   12px;
  --wx-radius-xl:   14px;
  --wx-radius-pill: 20px;

  /* ---- Shadows --------------------------------------------------------- */
  --wx-shadow-sm:   0 1px 4px rgba(20,30,45,0.08);
  --wx-shadow-card: 0 3px 10px rgba(20,30,45,0.10);
  --wx-shadow-raised: 0 8px 22px rgba(20,30,45,0.16);
  --wx-shadow-modal: 0 12px 40px rgba(20,30,45,0.12);
  --wx-shadow-dot:  0 1px 4px rgba(20,30,45,0.30);

  /* ---- Spacing scale --------------------------------------------------- */
  --wx-sp-1: 4px;
  --wx-sp-2: 7px;
  --wx-sp-3: 11px;
  --wx-sp-4: 14px;
  --wx-sp-5: 18px;
  --wx-sp-6: 24px;

  /* ---- Motion ---------------------------------------------------------- */
  --wx-transition: .12s ease;

  /* ---- Layout ---------------------------------------------------------- */
  --wx-maxw: 1200px;
}