/* ========================================================================== FleetGuard v2 — design tokens -------------------------------------------------------------------------- STAGING ONLY. Loaded exclusively by /v2/*.html. Nothing in the production path references this file. Two rules keep this isolated from the live app, and both must hold: 1. Every custom property is prefixed --v2-. The production pages define bare tokens (--bg, --ink, --accent, --line, --surface ...) inside guides.html and css/styles.css. A bare name here would collide the moment anyone loads both files on one page. Prefix, always. 2. Every class in the v2 stylesheets is prefixed .v2-, for the same reason: css/styles.css owns .card, .tab, .grid, .badge and friends. Palette, type scale and radius ramp below are taken from the design-system panel in the approved reference, with the accent hexes read off the swatches themselves — the panel's caption under "Red" actually carries Slate's value (#94A3B8) and Red's is missing, so red is reconstructed as #EF4444. Dark-only, per the reference. A light palette drops into the marked block at the bottom when it is scheduled; no other file needs to change. ========================================================================== */ :root, /* The sidebar is a dark island in the light theme. Production does the same thing with a dedicated --sidebar-* family (--sidebar-bg stays #1a1f2e in its own .light block, with light ink over it), so a dark rail against a light page is the shape this app already has. Listing .light .v2-sidebar alongside :root hands the whole DARK palette back to that subtree, with no duplicated values that could drift: (0,2,0) outranks the .light block below at (0,1,0) inside the rail, while .light still wins everywhere else. Without this the rail kept its dark ground while its ink followed the light theme. Measured before it existed: the brand wordmark at 1.00:1 (#1a1f2e on #1a1f2e, invisible), all eight nav labels at 2.61:1, the active item at 1.60:1, Sign Out at 1.98:1. */ .light .v2-sidebar, /* The Guides tool cards are the second dark island, for the same reason and a sharper one: their substrate is a PHOTOGRAPH, which does not change with the theme. The veil over the art is rgba(var(--v2-surface-rgb), ...), so it does invert -- but it is deliberately not opaque where the text sits, because the point of the cards is that the photograph shows through. Measured veil alpha under the text, by multiplying the transmittances of both gradient layers: card titles 0.10-0.42, body copy 0.22-0.75, on all six cards. Light ink over a barely-veiled photograph is what the dark theme already solved; handing the dark palette back reproduces that composition exactly, and needs no per-card scrim tuning that would bury the artwork. Worth recording how this was settled, because two earlier attempts got it wrong in opposite directions. A CSS-layer sweep says these cards pass: it composites the card gradient and never sees the photo. A canvas that redrew the photo, filter and scrims said everything failed at 1.00:1, but it failed its own validation on three of six cards, so its numbers meant nothing. The veil-alpha calculation above is trustworthy where the pixel model was not, because multiplying transmittances needs no image, no filter and no layer order -- the product is the same whichever way round the layers stack. */ .light .v2-tool-card { /* ── Surfaces ──────────────────────────────────────────────────────────── Sampled from the reference, and note the ordering: the sidebar is the LIGHTEST plane, not the darkest. The page ground sits deepest, cards lift off it, and the rail lifts furthest. That inversion is what makes the content area read as recessed and the chrome as raised. */ --v2-bg: #00050d; /* page ground, deepest */ --v2-bg-sidebar: #06121f; /* left rail, lightest plane */ --v2-surface: #030c19; /* cards, widgets */ --v2-surface-2: #091528; /* inputs, tabs, inner wells */ --v2-surface-3: #111e34; /* hover / raised */ /* Channel form of --v2-surface, for rgba() overlays over card artwork. MUST track --v2-surface above, or the overlay edge shows as a seam. */ --v2-surface-rgb: 3, 12, 25; /* -- Wells and lifts ------------------------------------------------------ Two depth effects the component sheets hardcoded, which a token remap could therefore not reach. Both were written as literals against the dark ground, so a light theme inverted them: a well painted a near-black veil across a white card (measured 1.09:1 on the Guides tags) and a lift painted white on white, deleting the hover affordance. WELL a recess below the surface -- the ground behind a banner row, a tag, a meta pill, a blank calendar cell. Dark: darken hard. LIFT a raise above it -- a hover ground, a top-edge highlight. Dark: lighten slightly. Split into a channel triplet and a multiplier so the alpha stays at each call site, where the depth ordering lives: a row at .45 and its hover at .7 keep their relative step automatically in both themes. The multiplier is 1 here, so every dark value resolves exactly as it did as a literal. Usage: rgba(var(--v2-well-rgb), calc(.45 * var(--v2-well-k))) */ --v2-well-rgb: 0, 5, 13; --v2-well-k: 1; --v2-lift-rgb: 255, 255, 255; --v2-lift-k: 1; /* ── Lines ─────────────────────────────────────────────────────────────── -line is the solid hairline; -glass is the translucent border that gives the reference its glassmorphism edge over imagery and gradients. Cards use the glass border, because a solid hairline over artwork reads as a seam while a translucent one picks up whatever is behind it. */ --v2-line: #17263c; --v2-line-strong: #24374f; --v2-line-glass: rgba(255, 255, 255, .1); --v2-line-glass-hi: rgba(255, 255, 255, .18); /* ── Ink ───────────────────────────────────────────────────────────────── Three steps, deliberately far apart. --v2-ink-2 is the design system's Slate: it is the single secondary tone, used for every description and sub-line, so "primary vs secondary" reads instantly. */ --v2-ink: #f1f5f9; /* headings, primary text 17.8:1 */ --v2-ink-2: #94a3b8; /* body copy, descriptions 7.6:1 */ /* Measured, not eyeballed. The first draft of this step was #5b6b82, which came out at 3.6:1 on card and 3.5:1 on the lighter sidebar — under AA's 4.5:1, and it carries section subtitles and eyebrow labels, which are read, not decoration. #74869f clears 5.1:1 on every ground in use and is still a clear step below --v2-ink-2. */ --v2-ink-3: #74869f; /* meta, counts, muted 5.3:1 */ --v2-ink-on-accent: #00050d; /* text on a filled accent = page ground */ /* ── Accents ───────────────────────────────────────────────────────────── Amber = tools & inspections. Cyan = calculators & routing. Green = live / operational. Red = compliance & urgency. Blue = news. Every accent below clears 7:1 against --v2-ink-on-accent, which is why filled buttons carry dark ink rather than white: white on amber is only ~2.4:1 and fails AA outright. */ --v2-amber: #ff8a00; --v2-amber-hi: #ffa733; --v2-amber-deep: #e06f00; --v2-amber-soft: rgba(255, 138, 0, .12); --v2-amber-ring: rgba(255, 138, 0, .42); /* ── Brand primary ─────────────────────────────────────────────────────── The corporate logo orange, matching production's --primary (#da6536), so the redesign reads as the same company as the app it replaces. Deliberately SEPARATE from the amber family above rather than recolouring it. Amber does double duty in this system: it is brand chrome AND the "Warning" status signal — warning chips, health bars, severity rails, score badges, thirteen places across five stylesheets. Recolouring amber wholesale would repaint every Warning indicator in the corporate colour, which both weakens it as a signal beside the red Criticals and makes the brand mean "caution". Primary drives identity and interaction; amber keeps meaning "warning". -hover and -glow are the semantic aliases; -hi / -deep / -soft / -ring match the structural naming every other accent family uses. */ --v2-primary: #da6536; --v2-primary-hi: #f08a5d; /* label text on a dark ground */ --v2-primary-deep: #b04d24; /* far end of a gradient fill */ --v2-primary-soft: rgba(218, 101, 54, .14); --v2-primary-ring: rgba(218, 101, 54, .45); --v2-primary-hover: var(--v2-primary-hi); --v2-primary-glow: var(--v2-primary-ring); --v2-cyan: #00d4ff; --v2-cyan-hi: #5ce4ff; --v2-cyan-deep: #0092b3; --v2-cyan-soft: rgba(0, 212, 255, .12); --v2-cyan-ring: rgba(0, 212, 255, .38); --v2-green: #22c55e; --v2-green-hi: #4ade80; --v2-green-soft: rgba(34, 197, 94, .12); --v2-green-ring: rgba(34, 197, 94, .38); --v2-red: #ef4444; --v2-red-hi: #f87171; /* Count badges are the one place white sits on a filled accent. White on #ef4444 is 3.8:1 and fails AA; this deeper step is 4.8:1. Everywhere else red is used as text or a ring, where #ef4444 is correct. */ --v2-red-deep: #dc2626; --v2-red-soft: rgba(239, 68, 68, .12); --v2-red-ring: rgba(239, 68, 68, .38); --v2-blue: #3b82f6; --v2-blue-hi: #60a5fa; --v2-blue-soft: rgba(59, 130, 246, .12); --v2-blue-ring: rgba(59, 130, 246, .38); --v2-slate: #94a3b8; /* ── Type ──────────────────────────────────────────────────────────────── Inter throughout, per the design system. Manrope and IBM Plex Mono are gone — one family, two fewer font requests. The -display and -mono token names are kept so the other stylesheets need no edit; -mono now means "Inter with tabular figures", applied via font-variant-numeric at the callsites that line numbers up. */ --v2-font-display: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif; --v2-font-body: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif; --v2-font-mono: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif; /* Scale, straight from the panel: size / line-height, in that order. */ --v2-fs-display: 2rem; --v2-lh-display: 2.5rem; /* 32/40 Bold */ --v2-fs-xl: 1.5rem; --v2-lh-xl: 2rem; /* 24/32 Bold */ --v2-fs-lg: 1.25rem; --v2-lh-lg: 1.75rem; /* 20/28 SemiBold */ --v2-fs-md: 1rem; --v2-lh-md: 1.5rem; --v2-fs-base: .875rem; --v2-lh-base: 1.25rem; /* 14/20 Regular */ --v2-fs-sm: .8125rem; --v2-lh-sm: 1.125rem; --v2-fs-xs: .75rem; --v2-lh-xs: 1rem; /* 12/16 Regular */ --v2-fs-micro: .6875rem; --v2-lh-micro: 1rem; /* 11/16 Medium */ --v2-fw-regular: 400; --v2-fw-medium: 500; --v2-fw-semibold: 600; --v2-fw-bold: 700; --v2-track-micro: .08em; /* letter-spacing for eyebrow labels */ --v2-track-tight: -.02em; /* display headings */ --v2-track-snug: -.01em; /* section headings */ /* ── Space ─────────────────────────────────────────────────────────────── 4px base. The page is laid out on this and nothing else. */ --v2-s1: .25rem; /* 4 */ --v2-s2: .5rem; /* 8 */ --v2-s3: .75rem; /* 12 */ --v2-s4: 1rem; /* 16 */ --v2-s5: 1.25rem; /* 20 */ --v2-s6: 1.5rem; /* 24 */ --v2-s7: 1.75rem; /* 28 */ --v2-s8: 2rem; /* 32 */ --v2-s10: 2.5rem; /* 40 */ --v2-s12: 3rem; /* 48 */ --v2-s14: 3.5rem; /* 56 */ --v2-s16: 4rem; /* 64 */ /* ── Radius ────────────────────────────────────────────────────────────── 4 / 8 / 12 / 16 / 24, exactly the ramp in the panel. */ --v2-r-xs: 4px; /* chips, tight controls */ --v2-r-sm: 8px; /* tags, meta pills, small buttons */ --v2-r-md: 12px; /* buttons, nav items, inputs */ --v2-r-lg: 16px; /* cards, widgets */ --v2-r-xl: 24px; /* featured cards */ --v2-r-pill: 999px; /* ── Elevation ─────────────────────────────────────────────────────────── Layered rather than single-drop: a tight contact shadow that seats the edge, a broad ambient one for depth, and an inset top highlight that catches light the way a raised surface does. The highlight is what stops a dark card on a dark ground from reading as a flat rectangle. */ --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04); --v2-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 12px 28px -14px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06); --v2-shadow-hover: 0 2px 6px rgba(0, 0, 0, .6), 0 26px 54px -16px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .1); /* Accent bloom used on card hover — colour supplied by --tc at the callsite. */ --v2-glow-soft: 0 0 0 1px var(--tc-ring), 0 8px 30px -10px var(--tc-soft); /* ── Layout ────────────────────────────────────────────────────────────── */ --v2-sidebar-w: 248px; --v2-topbar-h: 72px; --v2-content-max: 1440px; --v2-content-gutter: var(--v2-s10); /* ── Motion ────────────────────────────────────────────────────────────── */ --v2-ease: cubic-bezier(.4, 0, .2, 1); --v2-t-fast: .12s var(--v2-ease); --v2-t-base: .2s var(--v2-ease); } /* Honour the OS setting for anyone who asks for less movement. */ @media (prefers-reduced-motion: reduce) { :root { --v2-t-fast: .01ms; --v2-t-base: .01ms; } } /* ── Light palette ────────────────────────────────────────────────────────── Not built: the approved reference is dark-only. When light mode is scheduled, redefine the surface / line / ink tokens here and nothing else moves: :root[data-theme="light"] { --v2-bg: ...; --v2-ink: ...; } Leave the accent values alone — they are tuned to carry both grounds. ────────────────────────────────────────────────────────────────────────── */ /* ========================================================================== LIGHT THEME -------------------------------------------------------------------------- Production toggles .light on . Every declaration here is a --v2- custom property, so this block paints nothing on its own and can only be read by a v2 component -- which is why check-isolation.js accepts a bare .light selector here and nowhere else. The -soft and -ring tints are deliberately NOT overridden. They are the dark-theme hue at .12 / .38 alpha, and composited over white they give the pale wash a light UI wants anyway (amber-soft lands on #fff1e0). Replacing them with the deepened light hues would make every tinted chip muddy. ========================================================================== */ .light { /* -- Grounds -------------------------------------------------------------- The sidebar stays dark. Production keeps it dark in light mode too (--sidebar-bg: #1a1f2e), and a dark rail against a light page is the shape people already know this app by. */ --v2-bg: #f0f2f7; --v2-bg-sidebar: #1a1f2e; --v2-surface: #ffffff; --v2-surface-2: #eef0f5; --v2-surface-3: #e4e6ed; /* Must track --v2-surface: the card overlays composite against this triplet, and leaving it dark would paint black veils over white cards. */ --v2-surface-rgb: 255, 255, 255; /* -- Lines ---------------------------------------------------------------- The glass lines are white-on-dark in the dark theme; inverted here, or they vanish entirely against a white surface. */ --v2-line: #e2e6ed; --v2-line-strong: #d0d4de; --v2-line-glass: rgba(15, 23, 42, .10); --v2-line-glass-hi: rgba(15, 23, 42, .18); /* -- Ink ------------------------------------------------------------------ --v2-ink-3 is deliberately darker than production's own light --text3 (#9aa0b4). That value measures about 2.6:1 on white and fails AA; it is a pre-existing problem in styles.css and there is no reason to reproduce it in a palette being written from scratch. #5b6472 holds 4.80:1 on the darkest ground it lands on. */ --v2-ink: #1a1f2e; --v2-ink-2: #55607a; --v2-ink-3: #5b6472; /* Every solid accent fill below is deep enough to carry white, so one value serves all of them. */ --v2-ink-on-accent: #ffffff; /* -- Accents -------------------------------------------------------------- Every hue carries two duties, and in the light theme they collapse into one constraint. 1. TEXT on a light ground. Sixteen rules across the component sheets say color: var(--tc), and more say color: var(--tc-hi). The darkest ground any of that lands on is --v2-surface-3, #e4e6ed. 2. FILL under white text. Solid chips, buttons and avatars fill with the base hue and set --v2-ink-on-accent on top. Duty 1 is the tighter: clearing 4.5:1 as text on #e4e6ed needs a relative luminance at or below .137, while white-on-fill only needs .183. So each base hue is the lightest tone on its ramp that satisfies duty 1, and duty 2 comes free. Measured worst case across white, the page ground, both raised surfaces and all three well depths: 5.19:1. The consequence is that light-mode amber reads brown and green reads forest. That is arithmetic rather than taste -- no tone light enough to still look like amber can hold white text at 4.5:1 -- and it is why -hi undergoes a role reversal: on a dark ground -hi is the lightest tint, on white it must be the deepest, or every status word drops to about 1.7:1. An earlier draft kept the base hues bright, on the theory that they fill dots and bars rather than carrying text. The contrast sweep falsified it: they carry text in sixteen places. */ --v2-amber: #92400e; --v2-amber-hi: #78350f; --v2-amber-deep: #6b2e0c; --v2-primary: #9a4520; --v2-primary-hi: #7c3714; --v2-primary-deep: #6b2f11; --v2-cyan: #155e75; --v2-cyan-hi: #164e63; --v2-cyan-deep: #134152; --v2-green: #166534; --v2-green-hi: #14532d; --v2-red: #b91c1c; --v2-red-hi: #991b1b; --v2-red-deep: #7f1d1d; --v2-blue: #1d4ed8; --v2-blue-hi: #1e40af; --v2-slate: #55607a; /* -- Wells and lifts ------------------------------------------------------ On a white UI both a recess and a raised hover read as a grey tint of the ink, so both channels become the same slate and only the multipliers differ: wells are heavy on dark (.45-.7) and must come down hard, lifts are already subtle (.014-.09) and need only a nudge. */ --v2-well-rgb: 15, 23, 42; --v2-well-k: .13; --v2-lift-rgb: 15, 23, 42; --v2-lift-k: 1.2; /* -- Elevation ------------------------------------------------------------ Near-black drop shadows read as dirt on a white page, and the inset white highlight that lifts a dark card does nothing on one. Softer and cooler. */ --v2-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --v2-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 28px -14px rgba(15, 23, 42, .18); --v2-shadow-hover: 0 2px 6px rgba(15, 23, 42, .09), 0 26px 54px -16px rgba(15, 23, 42, .26); }