/* ============================================================================ 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 { /* Every surface below is a light one. Declaring it stops the browser from rendering native UI (scrollbars, form controls, pickers) dark for users whose OS is in dark mode — there is no dark variant of this palette. */ color-scheme: light; /* --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 */ --cc-purple: #a855f7; --cc-pink: #ec4899; /* ---- extended neutrals (promoted from ad-hoc hex used across pages) ---- */ --cc-gray-100: #f3f4f6; /* faintest fill — code chips, inline count badges */ --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% */ --cc-success-tint: rgba(34, 197, 94, 0.16); /* --cc-success @ 16% */ --cc-danger-tint: rgba(239, 68, 68, 0.14); /* --cc-danger @ 14% */ --cc-info-tint: rgba(59, 130, 246, 0.14); /* --cc-info @ 14% */ --cc-yellow-tint: rgba(234, 179, 8, 0.18); /* --cc-yellow @ 18% */ --cc-teal-tint: rgba(20, 184, 166, 0.16); /* --cc-teal @ 16% */ --cc-indigo-tint: rgba(99, 102, 241, 0.16); /* --cc-indigo @ 16% */ --cc-purple-tint: rgba(168, 85, 247, 0.14); /* --cc-purple @ 14% */ --cc-pink-tint: rgba(236, 72, 153, 0.14); /* --cc-pink @ 14% */ /* ---- 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-purple-text: #6b21a8; /* readable on --cc-purple tint */ --cc-pink-text: #9d174d; /* readable on --cc-pink tint */ --cc-header-h: 72px; --cc-tab-bar-h: 52px; --cc-footer-h: 36px; --cc-bottom-nav-h: 60px; /* Bottom nav's real footprint: the bar plus the phone's home-indicator inset. */ --cc-bottom-nav-total-h: calc(var(--cc-bottom-nav-h) + env(safe-area-inset-bottom, 0px)); /* Backdrop behind an overlaying panel (mobile drawer). */ --cc-scrim: rgba(0, 0, 0, 0.42); --cc-drawer-w: 280px; /* persistent nav drawer — must match MudDrawer Width in Components/Layout/MainLayout.razor */ /* ---- 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-2xs: 12px; /* dense telemetry chrome only — the Monitor AMR cards and the fleet-map marker card, where a ~180px card stacks five lines of data */ --cc-fs-xs: 13px; --cc-fs-sm: 14px; --cc-fs-md: 15px; --cc-fs-lg: 17px; --cc-fs-xl: 19px; /* small headings, section titles */ --cc-fs-2xl: 21px; /* card / panel titles */ --cc-fs-3xl: 25px; /* page titles */ --cc-fs-display-sm: 31px; /* stat values */ --cc-fs-display: 45px; /* hero KPI values */ /* ---- elevation ---- Floating-card shadow shared by the login, accept-invite, and legal-document cards — the full-page cards that sit on the topo backdrop. */ --cc-shadow-card: 0 2px 6px rgba(0, 0, 0, 0.04), 0 18px 40px rgba(0, 0, 0, 0.14), 0 40px 80px rgba(0, 0, 0, 0.10); /* ---- search-field widths ---- Derived from the placeholder instead of a magic pixel width, so the hint text is never clipped. --cc-search-chrome is everything in the input that isn't the text (start search icon, clear button, and the outlined input's own horizontal padding); the ch part is the longest placeholder the field has to show: --cc-search-w 20ch — "Search Serial Number" (support pages, Dashboard) --cc-search-w-lg 30ch — "Search by name, email, or phone…" (admin filter bars) Always pair with `min-width: min(100%, )` on narrow layouts: the floor keeps the placeholder readable, min() keeps the field from overflowing a container smaller than the floor. */ --cc-search-chrome: 5.5rem; --cc-search-w: calc(20ch + var(--cc-search-chrome)); --cc-search-w-lg: calc(30ch + var(--cc-search-chrome)); /* ---- 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 */ /* ---- frosted overlay surfaces — floating panels that sit ON TOP of a map: the Monitor toolbar / AMR list / connection banner / AMR cards. Deliberately DARK: these float over satellite imagery, where a dark scrim separates the panel from the map far better than a light one, and the light version read as washed out. This is the one place in the app that inverts, so it gets its own foreground set below rather than borrowing the light-surface neutrals — that is what makes the inversion expressible in tokens at all. Light-on-map surfaces that are NOT part of this language (the fleet-map legend, the marker InfoWindow) stay light and use the normal neutrals. ---- */ --cc-glass-surface: rgba(15, 23, 42, 0.55); /* panel scrim */ --cc-glass-surface-strong: rgba(51, 65, 85, 0.85); /* a card sitting on the scrim */ --cc-glass-surface-hover: rgba(71, 85, 105, 0.9); --cc-glass-hairline: rgba(148, 163, 184, 0.2); --cc-glass-border: rgba(148, 163, 184, 0.25); --cc-glass-border-strong: rgba(148, 163, 184, 0.4); --cc-glass-divider: rgba(148, 163, 184, 0.3); --cc-glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); --cc-glass-blur: blur(12px); /* foreground + fills for anything sitting ON the glass */ --cc-glass-text-strong: #ffffff; /* serials, titles, primary values */ --cc-glass-text: #e2e8f0; /* body text, icon buttons */ --cc-glass-text-muted: #94a3b8; /* labels, ETAs, placeholders */ --cc-glass-hover: rgba(148, 163, 184, 0.2); --cc-glass-track: rgba(148, 163, 184, 0.2); /* meter / progress track */ --cc-glass-track-subtle: rgba(148, 163, 184, 0.15); --cc-glass-field: rgba(15, 23, 42, 0.5); /* input fill */ --cc-glass-field-border: rgba(148, 163, 184, 0.35); --cc-glass-danger: rgba(127, 29, 29, 0.35); /* faulted card wash */ --cc-glass-ring: rgba(15, 23, 42, 0.9); /* separates a badge from the glass */ /* ---- 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 — the true unit color, but the Dashboard swatch renders it --cc-gray-400: white on a white card is invisible */ --cc-unit-magenta: var(--cc-purple); /* byte 112 (RcmAccentPurple) — same #a855f7 */ /* ---- 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); }