/* ============================================================================ COMMAND CENTER — DESIGN TOKENS (:root). Single source of truth for spacing, radius, type scale, neutrals, and semantic status/state colors. Loaded before cc-chrome.css / cc-components.css / cc-errors.css and before MudBlazor. BRAND-SPECIFIC values (the accent --cc-red / --cc-red-hover / --cc-brand-text, the chrome --cc-black / --cc-header-bg, and the --cc-font-* roles) live in cc-brand.css, loaded immediately before this file. Everything here is brand-neutral and should stay that way — if a new token would change when the app is rebranded, it belongs in cc-brand.css instead. ============================================================================ */ /* ---------------------------------------------------------------------------- CANONICAL BREAKPOINTS — the single reference for every media query, the JS viewport hook, and any C# breakpoint logic. They mirror MudBlazor's sm/md/lg so CSS, viewport.js, and the C# theme all agree: sm 600px phone / small-tablet boundary (phone = max-width: 599.98px) md 960px tablet / desktop boundary (compact = max-width: 959.98px) lg 1280px wide desktop (below lg = max-width: 1279.98px) Rules: • Author descending overrides as `max-width: ` — i.e. use the .98 sub-pixel form (599.98 / 959.98 / 1279.98). Do NOT mix 599/600 or 767.98/768 conventions; the whole app uses the .98 form. • The app drawer overlays (Temporary) below md and pushes (Persistent) at ≥ md — the md edge (960) is the single drawer cutover, matching the mobile-nav cutover in cc-chrome.css and MainLayout's viewport hook. • Reserve `min-width: 1600px` strictly for large-monitor / wall-display tiers. Do NOT introduce ad-hoc 520/700/768/860/900/992/1024/1100 breakpoints — snap to the nearest canonical edge instead. ---------------------------------------------------------------------------- */ :root { /* --cc-red / --cc-red-hover / --cc-brand-text / --cc-black / --cc-header-bg are defined in cc-brand.css. */ --cc-dark-gray: #4d4d4d; --cc-medium-gray: #b3b3b3; --cc-light-gray: #ebebeb; --cc-bg: #f5f5f5; --cc-white: #fff; --cc-success: #22c55e; --cc-warning: #f59e0b; --cc-info: #3b82f6; --cc-danger: #ef4444; --cc-yellow: #eab308; /* Recording state — gold, distinct from amber Paused */ --cc-teal: #14b8a6; /* Ready / Finished state */ --cc-indigo: #6366f1; /* Updating state */ /* ---- extended neutrals (promoted from ad-hoc hex used across pages) ---- */ --cc-gray-200: #e5e7eb; /* wizard inactive step / rail */ --cc-gray-300: #cccccc; /* tab-bar surface */ --cc-gray-400: #9ca3af; /* offline state gray */ --cc-gray-500: #757575; /* nav section labels */ --cc-hover-surface: #fafafa; /* row / list hover background */ --cc-border-subtle: #f0f0f0; /* faint row dividers inside cards */ --cc-field-bg: #fbfbfc; /* resting fill for text inputs (brightens to white on focus) */ /* ---- "solid tone" fills — saturated status colors used as icon/tile/avatar backgrounds and card rails (distinct from the lighter --cc-success/-warning/-info fills used for dots). Promoted from ad-hoc hex; reused 3-5x each. ---- */ --cc-success-solid: #16a34a; --cc-warning-solid: #ea580c; --cc-info-solid: #2563eb; /* ---- status tints — the 10-18% washes used behind pills, banners, and selected rows. Pair with the matching --cc-*-text foreground. ---- */ --cc-warning-tint: rgba(245, 158, 11, 0.18); /* --cc-warning @ 18% */ /* ---- external brand (Salesforce links) ---- */ --cc-sf-blue: #0070d2; /* ---- Events coverage-map path legend. Three distinct path types drawn on the All Events map and mirrored on the events table / legend dots. These same values are duplicated as literals in wwwroot/Scripts/EventsMap.js (the JS-crossing exception — Google Maps polylines need a literal color); keep the two in sync. ---- */ --cc-path-autonomous: var(--cc-success); /* green — autonomous mowing */ --cc-path-manual: #f97316; /* orange — manual mowing */ --cc-path-driving: var(--cc-info); /* blue — driving (PTO off) */ /* ---- Monitor live-control palette. Machine-STATE color now flows through the canonical --cc-state-* scale below (Monitor's GetStateBorderColor / GetPanelStateColor return those tokens), so there is no longer a parallel state scale. --cc-emerald is kept ONLY for the fuel / battery gauges — a different semantic than machine state. --cc-slate stays as the neutral fallback for control-panel chrome. ---- */ --cc-emerald: #10b981; --cc-slate: #64748b; /* ---- semantic "strong text on tint" — readable text colors that pair with the 10-18% tinted backgrounds on pills, banners, chips, status text. Single source so every success/warning/etc. label matches. --cc-danger-text is SEMANTIC, not brand: it means "something is wrong". It happens to equal a darkened brand red today only because the current brand accent is red. It must stay a red even if the accent changes — for brand-colored text use --cc-brand-text (cc-brand.css) instead. ---- */ --cc-success-text: #166534; --cc-warning-text: #92400e; --cc-danger-text: #b8001f; --cc-info-text: #1d4ed8; --cc-yellow-text: #854d0e; /* readable on --cc-yellow tint */ --cc-teal-text: #0f766e; /* readable on --cc-teal tint */ --cc-indigo-text: #4338ca; /* readable on --cc-indigo tint */ --cc-header-h: 72px; --cc-tab-bar-h: 52px; --cc-footer-h: 36px; --cc-bottom-nav-h: 60px; /* ---- spacing scale ---- */ --cc-sp-1: 2px; --cc-sp-2: 4px; --cc-sp-3: 6px; --cc-sp-4: 8px; --cc-sp-5: 12px; --cc-sp-6: 14px; --cc-sp-7: 18px; --cc-sp-8: 24px; /* ---- corner radii ---- */ --cc-radius-sm: 6px; --cc-radius-md: 8px; --cc-radius-lg: 12px; /* ---- type scale ---- Body/UI sizes (xs..lg) plus display sizes for headings, KPI values, and stat numbers. The display steps replace the hard-coded px literals that were scattered across component CSS (18/20/24/30/44px) — migrate those to these tokens so the typographic rhythm has a single source of truth. */ --cc-fs-xs: 12px; --cc-fs-sm: 13px; --cc-fs-md: 14px; --cc-fs-lg: 16px; --cc-fs-xl: 18px; /* small headings, section titles */ --cc-fs-2xl: 20px; /* card / panel titles */ --cc-fs-3xl: 24px; /* page titles */ --cc-fs-display-sm: 30px; /* stat values */ --cc-fs-display: 44px; /* hero KPI values */ /* ---- semantic machine-state colors (single source of truth; mirrored by the C# StateClass()/StatePill() helpers on Dashboard and Monitor's GetStateBorderColor()/GetPanelStateColor(), which return these tokens). One class per meaningful MowerState — see the Online Mowers color spec. ---- */ --cc-state-mowing: var(--cc-success); /* green — Mowing · ReturningHome */ --cc-state-idle: var(--cc-gray-400); /* gray — Idle */ --cc-state-manual: var(--cc-info); /* blue — Manual */ --cc-state-recording: var(--cc-yellow); /* yellow — Recording */ --cc-state-paused: var(--cc-warning); /* amber — Paused · LocalPause */ --cc-state-faulted: var(--cc-danger); /* red — Faulted · Stuck · Busy */ --cc-state-ready: var(--cc-teal); /* teal — Ready · Finished */ --cc-state-cleared: var(--cc-success); /* green — FaultCleared */ --cc-state-updating: var(--cc-indigo); /* indigo — Updating */ --cc-state-offline: var(--cc-header-bg); /* near-black — offline / stale telemetry */ /* ---- physical unit identity colors (AccentColor byte over the websocket). A separate dimension from machine state — rendered as an outlined swatch, never a filled state rail. Mirrors CommandCenterTheme.AccentColor(). ---- */ --cc-unit-blue: var(--cc-info); /* byte 98 */ --cc-unit-white: var(--cc-white); /* byte 119 — needs --cc-border-subtle ring */ --cc-unit-magenta: #a855f7; /* byte 112 (RcmAccentPurple) */ /* ---- NOAA space-weather scale (EnvironmentStatus) ---- */ --cc-noaa-r5: rgba(200, 0, 0, 0.25); --cc-noaa-r4: rgba(255, 0, 0, 0.25); --cc-noaa-r3: rgba(255, 150, 0, 0.25); --cc-noaa-r2: rgba(255, 200, 0, 0.25); --cc-noaa-r1: rgba(246, 235, 20, 0.25); }