/* ===================================================================== CARGOER — Design Tokens Brand guideline v2 (Aug 2026) — see brand-reference/00-guideline-sheet.png for the source-of-truth palette, logo, and typography this file implements. Two layers, deliberately kept separate: 1. RAW BRAND PALETTE — the seven fixed guideline swatches. Never theme-dependent; a brand color doesn't change meaning between light and dark mode. 2. SEMANTIC TOKENS (surfaces/text/status/etc.) — theme-dependent. Every component should consume ONLY these, never a raw hex or a raw brand-* token directly, so it adapts automatically when the theme switches. See lib/theme.js for how [data-theme] gets set, and index.html's boot script for how it's set before first paint. This is the CARGOER PLATFORM BRAND (public website, demo experience, platform/dashboard UI foundation, reusable components, future Platform Admin) — not a client's configurable brand. See docs/BRANDING_ARCHITECTURE.md for that separate layer. ===================================================================== */ :root { /* ---- 1. RAW BRAND PALETTE (fixed) ---- Exact values from the brand guideline sheet's "04. COLOR PALETTE" panel. Don't reference these directly from component CSS — use the semantic tokens in section 3 below instead. */ --brand-cargoer-blue: #2563EB; /* Technology / AI / Intelligence / Connectivity — the primary brand blue */ --brand-deep-black: #0B0D0F; /* Cargo / Containers / Warehousing */ --brand-graphite: #1F2329; /* Cargo / Containers / Warehousing (secondary neutral) */ --brand-ocean-blue: #0A3D82; /* Ocean / Sea / Maritime Freight */ --brand-air-blue: #38BDF8; /* Air / Aviation / Air Freight */ --brand-sand: #C8A06A; /* Land / Ground / Terrain / Movement — also the logo's "E" accent */ --brand-road-gray: #4B4F56; /* Road / Asphalt / Highways */ --brand-light-gray: #F2F4F7; /* neutral light tint — light-mode surface groundwork */ /* Text/icon color for content placed ON TOP OF a solid --accent (or other saturated brand-hue) surface — a button label, a badge on an accent chip, a chat bubble. Matches .btn-primary's existing text color exactly (components.css) — Cargoer Blue reads about the same contrast against near-white as against near-black, so one constant works for both themes; kept as one token so every "text on accent" spot stays consistent instead of a mix of ad hoc near-white/near- black hexes (Phase 3 color audit found both in the wild). */ --on-accent: #F8FAFF; /* A few existing accent-colored chips/markers (home-facility.css's animated scene illustrations — package/document/lifecycle markers) used a dark warm near-black for their icon instead of --on-accent's light tone. Kept as its own token rather than silently unifying them to --on-accent, which would visibly change their look without an actual design decision to do so — this preserves what's already there while still removing the raw hex. */ --on-accent-dark: #14100A; /* Third color in the Packing & Handling animation's 3-crate stack (home-facility.css) — the first two crates are --accent/--accent- strong; a third blue would blur together, so this stays a neutral light gray for visual variety. Theme-independent (illustration). */ --illustration-neutral: #C9CDD4; /* ---- 2. FREIGHT-MODE SEMANTIC COLORS ---- Aliases for the guideline's "08. VISUAL LANGUAGE" mode/meaning colors. Reach for these — not a raw brand-* token, and never a one-off hex — anywhere the UI visually distinguishes freight mode or domain: shipment-mode badges, map/legend keys, service icons, the future Platform Admin's module colors. Theme-independent by design: a mode's identity color doesn't invert with light/dark. */ --mode-ocean: var(--brand-ocean-blue); /* Ocean / Sea */ --mode-air: var(--brand-air-blue); /* Air / Aviation */ --mode-land: var(--brand-sand); /* Land / Ground transport */ --mode-road: var(--brand-road-gray); /* Road / Highways */ --mode-cargo: var(--brand-graphite); /* Cargo / Containers / Warehousing */ --mode-tech: var(--brand-cargoer-blue); /* Technology / AI / Connectivity */ /* ---- Isometric illustration shading ---- The "Engineered For Density" warehouse-rack visualization (styles/engineered-density.css) renders 3D isometric shapes, which need 2-3 progressively darker shades of one hue for top/side/side-x faces — the same technique a photo or render would use, so (like a photo) these are deliberately theme-INDEPENDENT: the illustration doesn't invert when the page switches theme. Cargo faces shade the Graphite/Deep-Black neutral (Cargo/Warehouse meaning); the rack's hover/active side-faces shade Sand (Land/Ground meaning — physical goods on the ground). Was 5 unexplained one-off hexes; now traceable to the two brand colors they're actually derived from. */ --mode-cargo-shade-1: #232B36; /* top face */ --mode-cargo-shade-2: #171D25; /* side face */ --mode-cargo-shade-3: #11161C; /* side-x face (darkest) */ --mode-cargo-stroke: #0A0D12; /* shared face outline */ --mode-land-shade-1: #A97C2C; /* Sand, shaded darker/more saturated for a hover side-face */ --mode-land-shade-2: #6D5323; /* Sand, shaded darkest for a hover side-x face */ /* ---- Typography (brand guideline: Rajdhani SemiBold primary / Inter Regular secondary — theme-independent) ---- */ --font-display: "Rajdhani", "Arial Narrow", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* ---- Spacing scale ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---- Radii (deliberately restrained — not a rounded SaaS look) ---- */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --container-max: 1280px; --header-h: 72px; } /* ===================================================================== 3. THEME MECHANISM Two intentionally-designed modes — dark is not a lightened light mode, and light is not a "we turned the lights on" pass over dark. Dark is the default (matches the product today and the guideline's own hero application shots); light is opt-in via [data-theme="light"] on , set by lib/theme.js/components/ThemeToggle.js and persisted to localStorage. index.html carries a small pre-paint boot script that applies the stored/system preference before first paint, so there is no flash of the wrong theme. `:root` alone (no attribute yet) also resolves to dark, so anything that renders before that boot script runs — or a stylesheet consumer with JS disabled — still gets a correct, intentional theme rather than an unstyled one. ===================================================================== */ :root, [data-theme="dark"] { color-scheme: dark; /* ---- Surfaces — graduated up from Deep Black ---- */ --bg-0: var(--brand-deep-black); --bg-1: #0E1114; --surface-1: #13171C; --surface-2: #181D24; --surface-3: #1E252D; --border-1: #232B34; --border-2: #2C363F; --border-strong: #3B4753; /* ---- Text ---- */ --text-0: #F2F5F8; --text-1: #CBD5E0; --text-2: #90A0B2; --text-3: #64758A; /* ---- Brand accent ---- Cargoer Blue stays the single interactive/link color in both themes (per the guideline: it's the "primary Cargoer technology/brand blue") — only its supporting tints shift per-theme for contrast. */ --accent: var(--brand-cargoer-blue); --accent-strong: #5B93F5; --accent-dim: #1D4FC0; --accent-bg: rgba(37, 99, 235, 0.14); --accent-border: rgba(37, 99, 235, 0.4); /* Lighter-weight accent washes than --accent-bg — for a soft radial glow behind an illustration/scene (--accent-glow-soft) or an SVG stroke highlight (--accent-glow-medium), where --accent-bg's 0.14 reads too strong. */ --accent-glow-soft: rgba(37, 99, 235, 0.06); --accent-glow-medium: rgba(37, 99, 235, 0.22); --accent-glow-strong: rgba(37, 99, 235, 0.28); /* Large-area low-opacity status tint — for filling a big SVG shape (e.g. a warehouse map's whole dock zone) where --status-*-bg's normal opacity (sized for a small badge chip) would be too heavy. */ --status-reserved-wash: rgba(95, 147, 201, 0.06); /* Modal / lightbox backdrop scrim. */ --scrim: rgba(5, 7, 10, 0.88); /* ---- Atmosphere — gradients, glass, glow ---- Dark mode leans on an Ocean Blue glow (maritime/global depth) with a faint Air Blue rim light and the Cargoer Blue tech sheen, echoing the guideline's own dark "Brand Applications"/"Brand Essence" panels. */ --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -5%, rgba(10, 61, 130, 0.45), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 15%, rgba(37, 99, 235, 0.22), transparent 65%), radial-gradient(ellipse 45% 40% at 8% 85%, rgba(56, 189, 248, 0.10), transparent 70%), var(--bg-0); --gradient-accent-sheen: linear-gradient(135deg, var(--brand-ocean-blue) 0%, var(--brand-cargoer-blue) 55%, var(--brand-air-blue) 100%); --gradient-mesh: radial-gradient(circle at 18% 20%, rgba(37, 99, 235, 0.12), transparent 42%), radial-gradient(circle at 82% 0%, rgba(10, 61, 130, 0.16), transparent 46%), radial-gradient(circle at 50% 100%, rgba(56, 189, 248, 0.08), transparent 52%); --surface-glass: rgba(24, 29, 36, 0.62); --surface-glass-border: rgba(242, 245, 248, 0.08); --glow-accent: 0 0 24px rgba(37, 99, 235, 0.35); --glow-ocean: 0 0 32px rgba(10, 61, 130, 0.5); --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.28); --shadow-elevated: 0 4px 12px rgba(0,0,0,0.5), 0 20px 48px rgba(0,0,0,0.4); --shadow-accent-glow: 0 0 0 3px var(--accent-bg), 0 0 16px rgba(37,99,235,0.25); /* ---- Status colors (warehouse positions / booking / quotation states) ---- */ --status-available: #2FBF78; --status-available-bg: rgba(47, 191, 120, 0.14); --status-selected: var(--accent); --status-selected-bg: var(--accent-bg); --status-reserved: #5F93C9; --status-reserved-bg: rgba(95, 147, 201, 0.16); --status-occupied: #E0564C; --status-occupied-bg: rgba(224, 86, 76, 0.14); --status-blocked: #5B6675; --status-blocked-bg: rgba(91, 102, 117, 0.18); --status-maintenance: #9B6BD6; --status-maintenance-bg: rgba(155, 107, 214, 0.16); --success: #2FBF78; --warning: #E2A63B; --danger: #E0564C; --info: #5F93C9; /* bg/border pairs for the four alert/badge tones — same trio pattern as --accent/--accent-bg/--accent-border, so badges/alerts don't each invent their own one-off rgba() of the base tone (Phase 3 color audit found 4 of exactly that in components.css's .badge-* rules). */ --success-bg: rgba(47, 191, 120, 0.14); --success-border: rgba(47, 191, 120, 0.35); --warning-bg: rgba(226, 166, 59, 0.14); --warning-border: rgba(226, 166, 59, 0.4); --danger-bg: rgba(224, 86, 76, 0.14); --danger-border: rgba(224, 86, 76, 0.35); --info-bg: rgba(95, 147, 201, 0.14); --info-border: rgba(95, 147, 201, 0.35); /* The Admin dashboard's "AI Intelligence" tab (admin-dashboard.css) is a deliberately distinct visual register — info/reserved-blue instead of the accent blue — with its own translucent hero panel and pulse glow. */ --info-glass: rgba(18, 24, 33, 0.6); --info-glow: rgba(95, 147, 201, 0.5); /* Sticky nav-bar glass background — a two-stop vertical fade (slightly more opaque at the top edge than the bottom), used by the unified portal TopNav (.topnav) and the admin header v2 (.anav). Distinct from --surface-glass's flatter single-value wash (used by simpler bars like .site-header) because these headers fade slightly toward their bottom edge by design. */ --topnav-glass-top: rgba(14, 19, 25, 0.96); --topnav-glass-bottom: rgba(14, 19, 25, 0.88); --anav-glass-top: rgba(14, 19, 25, 0.97); --anav-glass-bottom: rgba(14, 19, 25, 0.90); /* Nearly-opaque glass for a nav's dropdown/flyout panel — shared by .topnav-dropdown-menu and .anav-panel, which already used the identical two-stop value. */ --nav-panel-glass-top: rgba(18, 24, 33, 0.98); --nav-panel-glass-bottom: rgba(14, 19, 25, 0.98); /* Subtle neutral hover wash for a control that sits on a translucent/ glass surface (e.g. .topnav-group:hover) where a themed surface token would read as too solid a box. */ --hover-wash: rgba(255, 255, 255, 0.03); /* Ocean Blue and Road Gray are both dark, low-lightness hues — true to the guideline's swatches, and fine as the invariant --mode-ocean/ --mode-road identity colors (washes, legend keys, large fills, both defined above). But at small icon/glyph scale on this dark theme's near-black surfaces, both go near-invisible (dark-on-near-black). These "-fg" variants exist only for that small-scale-on-a-surface case: same identity hue, lightened so the icon actually reads here — reset back to the true brand value in light mode below, where it already has plenty of contrast. Air Blue and Sand read fine at icon scale in both themes already and don't need one. */ --mode-ocean-fg: #4A82C4; --mode-road-fg: #9CA6B0; /* ---- CARGOER main-website "color rhythm" tone washes (Main Website WOW phase) ---- deliberate atmospheric backgrounds for the four named visual environments the brand guideline calls for beyond plain dark/ light (Ocean, Sand/Land, Air, Cargoer-Blue Technology) — a subtle radial wash layered over the theme's own --bg-0/--bg-1, never a solid saturated block (guideline: "controlled glow", not neon). Each is defined once per theme, like --gradient-hero, so a section that opts into a tone stays correct across both modes automatically. */ --tone-tech-wash: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(37, 99, 235, 0.16), transparent 65%); --tone-ocean-wash: radial-gradient(ellipse 75% 55% at 50% 8%, rgba(10, 61, 130, 0.32), transparent 68%), radial-gradient(ellipse 50% 40% at 90% 95%, rgba(56, 189, 248, 0.08), transparent 70%); --tone-sand-wash: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(200, 160, 106, 0.15), transparent 65%); --tone-air-wash: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(56, 189, 248, 0.15), transparent 65%); } [data-theme="light"] { color-scheme: light; /* ---- Surfaces ---- */ --bg-0: #F5F7FA; --bg-1: #EEF1F5; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F2F4F7; --border-1: #DFE4EA; --border-2: #CBD3DC; --border-strong: #AEB8C4; /* ---- Text ---- */ --text-0: #0B0D0F; --text-1: #1F2329; --text-2: #4B4F56; --text-3: #6B7280; /* ---- Brand accent ---- */ --accent: var(--brand-cargoer-blue); --accent-strong: #1D4FC0; --accent-dim: #1544A6; --accent-bg: rgba(37, 99, 235, 0.08); --accent-border: rgba(37, 99, 235, 0.28); --accent-glow-soft: rgba(37, 99, 235, 0.05); --accent-glow-medium: rgba(37, 99, 235, 0.14); --accent-glow-strong: rgba(37, 99, 235, 0.20); --status-reserved-wash: rgba(62, 111, 160, 0.05); --scrim: rgba(11, 13, 15, 0.55); /* ---- Atmosphere — gradients, glass, glow ---- Same Ocean/Cargoer/Air blend, re-balanced to sit on a light ground: lower-opacity washes instead of a glow, so it reads as depth rather than a dark panel pasted onto a light page. */ --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -5%, rgba(10, 61, 130, 0.10), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 15%, rgba(37, 99, 235, 0.08), transparent 65%), radial-gradient(ellipse 45% 40% at 8% 85%, rgba(56, 189, 248, 0.07), transparent 70%), var(--bg-0); --gradient-accent-sheen: linear-gradient(135deg, var(--brand-ocean-blue) 0%, var(--brand-cargoer-blue) 55%, var(--brand-air-blue) 100%); --gradient-mesh: radial-gradient(circle at 18% 20%, rgba(37, 99, 235, 0.05), transparent 42%), radial-gradient(circle at 82% 0%, rgba(10, 61, 130, 0.06), transparent 46%), radial-gradient(circle at 50% 100%, rgba(56, 189, 248, 0.05), transparent 52%); --surface-glass: rgba(255, 255, 255, 0.66); --surface-glass-border: rgba(11, 13, 15, 0.08); --glow-accent: 0 0 20px rgba(37, 99, 235, 0.18); --glow-ocean: 0 0 24px rgba(10, 61, 130, 0.14); --shadow-card: 0 1px 2px rgba(16,24,40,0.06), 0 8px 24px rgba(16,24,40,0.08); --shadow-elevated: 0 4px 12px rgba(16,24,40,0.08), 0 20px 48px rgba(16,24,40,0.12); --shadow-accent-glow: 0 0 0 3px var(--accent-bg), 0 0 16px rgba(37,99,235,0.18); /* ---- Status colors — darkened for AA contrast on white/near-white ---- */ --status-available: #1F9D5D; --status-available-bg: rgba(31, 157, 93, 0.10); --status-selected: var(--accent); --status-selected-bg: var(--accent-bg); --status-reserved: #3E6FA0; --status-reserved-bg: rgba(62, 111, 160, 0.10); --status-occupied: #C8443B; --status-occupied-bg: rgba(200, 68, 59, 0.10); --status-blocked: #5B6675; --status-blocked-bg: rgba(91, 102, 117, 0.10); --status-maintenance: #7C4DBD; --status-maintenance-bg: rgba(124, 77, 189, 0.10); --success: #1F9D5D; --warning: #B7791F; --danger: #C8443B; --info: #3E6FA0; --success-bg: rgba(31, 157, 93, 0.10); --success-border: rgba(31, 157, 93, 0.32); --warning-bg: rgba(183, 121, 31, 0.10); --warning-border: rgba(183, 121, 31, 0.34); --danger-bg: rgba(200, 68, 59, 0.10); --danger-border: rgba(200, 68, 59, 0.32); --info-bg: rgba(62, 111, 160, 0.10); --info-border: rgba(62, 111, 160, 0.32); --info-glass: rgba(255, 255, 255, 0.7); --info-glow: rgba(62, 111, 160, 0.35); /* Nav glass — see the dark-mode block above for what each token is for. */ --topnav-glass-top: rgba(255, 255, 255, 0.96); --topnav-glass-bottom: rgba(255, 255, 255, 0.88); --anav-glass-top: rgba(255, 255, 255, 0.97); --anav-glass-bottom: rgba(255, 255, 255, 0.90); --nav-panel-glass-top: rgba(255, 255, 255, 0.98); --nav-panel-glass-bottom: rgba(248, 250, 252, 0.98); --hover-wash: rgba(11, 13, 15, 0.035); /* Full-strength brand hue — already reads clearly against this theme's light surfaces, so no lightened variant is needed here (see the dark-mode block above for why one exists there). */ --mode-ocean-fg: var(--brand-ocean-blue); --mode-road-fg: var(--brand-road-gray); /* Same four tone washes, re-balanced for a light ground — low-opacity tints rather than a glow, matching --gradient-hero's own light-mode rebalance above. */ --tone-tech-wash: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(37, 99, 235, 0.07), transparent 65%); --tone-ocean-wash: radial-gradient(ellipse 75% 55% at 50% 8%, rgba(10, 61, 130, 0.08), transparent 68%); --tone-sand-wash: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(200, 160, 106, 0.12), transparent 65%); --tone-air-wash: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(56, 189, 248, 0.11), transparent 65%); }