/* ========================================================================== app-design.css -- design tokens and components for the /app shell -------------------------------------------------------------------------- Loaded once from header-mobile.php, which is included for any URI containing "/app" or "?app" (see header.php). It therefore styles both the shell (header bar, offcanvas menu, bottom bar) and the report markup that appcontent.php injects into it -- appcontent.php is fetched raw, without WordPress, so it cannot enqueue anything of its own. SCOPE Every rule is under .app-shell / .season-*, which are put on by the inline script at the top of header-mobile.php. Nothing here can leak into the main website. SEASON .season-winter and .season-summer differ ONLY in the --app-accent-* tokens. Components never name a colour directly, so re-skinning a season means editing three values, not hunting through markup. Default season is date-derived (May 1 - Oct 1 = summer) and overridden by the visitor's Summer/Winter toggle, which is stored in localStorage. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Seasonal accents -------------------------------------------------------------------------- One accent per season, deliberately chosen to clear 4.5:1 BOTH ways -- as text on white and as white text/icons on a filled bar -- so the same token can paint the header bar and a 13px label without a second variant: #006bb6 winter 5.55:1 #4a7c37 summer 4.97:1 Fernie's existing summer green (#589442, in trailreport-2026.css) is only 3.66:1 and fails for small text, so it is kept as the bright/large-display variant rather than the accent. -------------------------------------------------------------------------- */ .season-winter { --app-accent: #006bb6; --app-accent-dark: #00538c; --app-accent-bright: #1a86d4; --app-accent-tint: #e7f1f8; } .season-summer { --app-accent: #4a7c37; --app-accent-dark: #3a6029; --app-accent-bright: #589442; --app-accent-tint: #eef4ea; } /* -------------------------------------------------------------------------- 2. Scale tokens -- identical in both seasons -------------------------------------------------------------------------- */ .app-shell { /* Type. One scale for every app page; components pick from it and never hard-code a px size. --fs-hero is fluid so the big open/total counter cannot overflow a narrow phone. */ --fs-hero: clamp(42px, 13vw, 60px); --fs-h1: 26px; --fs-h2: 22px; --fs-h3: 18px; --fs-body: 16px; --fs-small: 14px; --fs-label: 13px; --fs-micro: 12px; --fs-nano: 11px; /* table column headers only -- four of them have to fit a 320px row */ --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.6; --tracking-label: .08em; --tracking-title: .04em; /* Spacing -- 4px base */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --radius: 10px; --radius-sm: 6px; /* Neutrals */ --ink: #2f2f2f; --ink-muted: #6b6b6b; --ink-faint: #9b9b9b; --rule: #dcdcdc; --surface: #ffffff; --surface-alt:#f5f7f8; /* Status -- meaning, not season. These never change with the toggle. */ --status-open: #45a45e; --status-closed: #c2474c; --status-standby: #d9a441; } /* -------------------------------------------------------------------------- 3. Shell -- header bar, bottom bar, offcanvas menu -------------------------------------------------------------------------- header-mobile.php's own