/* ================================================ EA Spotless Rides — Shared Design Tokens Single source of truth imported by every surface: • Marketing → css/global.css • Portal → css/portal.css • Pay/card → css/pay.css • Command HQ → css/src/ops/01-base.css (inlined by postcss-import) Surfaces share this foundation and layer their own components on top — consistent, not identical. Edit values HERE, not per-surface. ================================================ */ :root { /* ----- Brand ----- */ --gold: #d4a017; --gold-light: #f0c040; --gold-dark: #b8881a; /* ----- Neutral ramp (dark theme) ----- */ --black: #0a0a0a; --dark: #111111; --dark2: #1a1a1a; --dark3: #222222; --gray: #9a9a9a; --white: #ffffff; /* ----- Text ----- */ --text: #ffffff; --text-muted: #aaaaaa; --text-faint: #9a9a9a; /* ----- Status (canonical — reconciles the portal + HQ forks) ----- */ --success: #9ee6b8; --success-bg: rgba(126, 223, 126, 0.14); --warning: #f0d488; --warning-bg: rgba(212, 160, 23, 0.16); --danger: #ff8a8a; --danger-bg: rgba(255, 140, 140, 0.12); --info: #7ec8e3; --info-bg: rgba(126, 200, 227, 0.14); /* ----- Typography ----- */ --font-display: "Barlow Condensed", Arial, sans-serif; --font-body: "Barlow", Arial, sans-serif; /* ----- Radius scale ----- */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; /* ----- Elevation / shadow scale (modern, HQ-aligned) ----- */ --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.28); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5); --shadow-xl: 0 24px 70px rgba(0, 0, 0, 0.6); --shadow-gold: 0 6px 20px rgba(212, 160, 23, 0.22); /* ----- Surfaces — subtle gradient lift on cards/panels ----- */ --surface-card: linear-gradient( 145deg, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0.012) ), var(--dark2); --surface-line: hsla(0, 0%, 100%, 0.1); --surface-soft: hsla(0, 0%, 100%, 0.04); /* ----- Surface roles (Phase 6, EAS-730) ----- What a surface IS, not what colour it happens to be. Command HQ had two card families that nothing reconciled: a themed card (#121212 + a white sheen + a 10% white line) and a flat card (--dark2 + a --dark3 line), written 105 times across 29 partials, so Supplies and Customers painted different cards on the same canvas. A card is now one thing everywhere. canvas the app background under everything (the body adds the glow) panel a card or panel sitting on the canvas raised something inside a panel that must read as its own tile: a row, a nested stat, a hovered item inset a well cut into a panel: inputs, code, a quiet empty state */ --canvas: #070707; --panel: linear-gradient(145deg, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0.012)), #121212; --panel-flat: #121212; --raised: hsla(0, 0%, 100%, 0.035); --inset: rgba(0, 0, 0, 0.28); --line: hsla(0, 0%, 100%, 0.1); --line-soft: hsla(0, 0%, 100%, 0.06); /* An outline or marker drawn straight on the canvas, with no panel behind it: a ghost button, a dashed "add" or "see more", a timeline rail or an empty-day dot. --line is 10% white, which on #070707 composites to about #202020 — fine as a card's edge, too faint to find a button by. Opaque on purpose, so it reads the same over the canvas, black or a panel. #3a3a3a is the brightest grey Detailer HQ drew these outlines in (the others were #2a2a2a and #333), so every one stays at least as visible as before; the one #3d3d3d edge (a later-this-week queue card) moves 3 units. Owner, 5 Oct 2026: "keep outlines bright". */ --line-strong: #3a3a3a; --line-accent: rgba(212, 160, 23, 0.45); --r-card: 12px; --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.22); /* ----- Layout roles (Phase 6B, EAS-735) ----- The gutter: from the edge of the work area (the screen, or the rail's edge) to where content starts. Command HQ never named it, and half of it was the marketing site's `section` padding, which Command HQ inherits by loading global.css. Values are what every screen already measured. */ --gutter-desktop: 46px; --gutter-tablet: 36px; --gutter-phone: 28px; /* ----- Type roles (Phase 6B/6D, EAS-736) ----- What a piece of text IS, as a font shorthand, so a rule picks a role rather than a size, weight, case and tracking of its own. Command HQ had nine looks for a card's heading, six for a record's name and eight for an eyebrow, most of them uppercase and bold, so nothing stood above anything else. Uppercase is now two roles only: the page title, the one heading per screen, and the eyebrow, a small label that helps scanning. */ --type-page: 900 26px/1 var(--font-display); --track-page: 0.075em; --type-section: 700 17px/1.25 var(--font-body); --type-record: 700 15px/1.3 var(--font-body); --track-record: -0.01em; --type-body: 400 13px/1.45 var(--font-body); --type-support: 400 12px/1.45 var(--font-body); --type-eyebrow: 800 10px/1.3 var(--font-body); --track-eyebrow: 0.08em; --type-metric: 800 22px/1.15 var(--font-body); --type-button: 800 13px/1 var(--font-display); --track-button: 0.06em; /* ----- Spacing roles (Phase 6E, EAS-739) ----- The standard density. A workspace can ask for compact or spacious with data-density on its panel (css/src/ops/63-layout.css), and every card, row and section inside it follows, so equivalent rows cannot drift apart because they came from different partials. Measured before: record rows were 8, 10 or 16px apart, and the same list row was padded 13/15, 12/14 or 12/16. */ --gap-row: 10px; /* between records in a list */ --gap-card: 14px; /* between cards stacked in a column */ --gap-section: 24px; /* between sections of a form or screen */ --pad-row: 12px 14px; /* inside a record row */ --pad-card: 12px 14px; /* inside a card */ /* ----- Chart palette (Phase 6F, EAS-740) ----- What a mark MEANS, so the same money is the same colour on every chart. Home drew collected money gold and Business drew it green; Home's booked slice was teal and Business's booked bar gold. Canvas cannot read these directly (it silently ignores "var(--x)"), so canvas code resolves them through chartColor() in js/lib/chart-theme.js. */ --chart-booked: var(--gold); --chart-revenue: var(--gold); --chart-underway: #14b8a6; --chart-completed: var(--text-muted); --chart-invoiced: var(--info); --chart-collected: var(--success); --chart-owed: var(--danger); --chart-expense: var(--danger); --chart-expense-soft: color-mix(in srgb, var(--chart-expense) 70%, transparent); /* the expense bar, and its legend key */ --chart-net: var(--success); --chart-grid: var(--surface-line); --chart-axis: var(--gray); --chart-focus: var(--white); --chart-line: 2; /* a chart's data line, px */ --chart-line-spark: 1.5; /* a sparkline in a tile, px */ /* ----- Status pill and count badge (Phase 6G, EAS-743) ----- One shape for a record's status wherever it appears, and one tone per MEANING. Command HQ drew statuses in five shapes (customer, supply, billing, payroll, job money chips): 10, 10.5 or 11px, weight 700 or 800, 20 to 28px tall, and the same "paid" was #7ddf7d in one list and var(--green) in the next. A pill reads its tone as --tone; fill and line are mixed from it in css/src/ops/67-status.css. */ --pill-font: 800 10px/14px var(--font-body); --pill-track: 0.06em; --pill-pad: 3px 9px; --tone-good: var(--success); --tone-warn: var(--gold); --tone-bad: var(--danger); --tone-info: var(--info); --tone-neutral: var(--text-muted); /* A count badge: the number on a rail row, a tab, the bell, a rail door. */ --count-font: 800 10px/16px var(--font-body); --count-size: 16px; /* ----- Form field (Phase 6G, EAS-744) ----- One text field and one dropdown. .ops-control-input was already the house control; the fields that never adopted it drew 30 to 47px tall, at 12 or 13px, on three different fills and two different lines. A phone keeps 16px text (08-layout-pass.css), below which iOS zooms in. */ --field-h: 36px; --field-size: 13px; --field-pad: 7px 10px; --field-bg: var(--dark); /* A value, not var(--border): that is defined in Command HQ's partials only, so on the Driveway and Detailer HQ the border would silently vanish. */ --field-line: #2a2a2a; /* The touch density: the crew's and the customer's apps. 16px text, below which iOS zooms into the page on focus (the Driveway's were 15px). */ --field-h-touch: 46px; --field-size-touch: 16px; --field-pad-touch: 12px 14px; /* A dropdown's caret, as 15-shared-ui.css draws it (a data-URI cannot read a variable, so the colours are the --gray and --gold values). */ --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239a9a9a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1.5 2 6 6.5 10.5 2'/%3E%3C/svg%3E"); --caret-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23d4a017' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1.5 2 6 6.5 10.5 2'/%3E%3C/svg%3E"); /* ----- Motion ----- */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.14s; --dur: 0.22s; /* ----- Z-index ladder ----- */ --z-sticky: 20; --z-nav: 100; --z-dropdown: 200; --z-modal: 1000; --z-toast: 1100; /* ----- Type scale ----- Derived from what the ops CSS ACTUALLY uses, not from an idealized ramp: 55 distinct font sizes were in play, and these eight cover the overwhelming majority of them (12px alone appears 250 times, 11px 196, 13px 163, 10px 115). Named by role so a new rule picks a meaning instead of a number. The design system in os/ proposes a fluid clamp() ramp; adopting that is a visual change and belongs to whoever adopts os/, so these are the production values as they stand. Four steps were added in Phase 10 (6 Oct 2026) for the heading sizes the eight left off: 15, 17, 20 and 26px were 166 hand-written sizes across Command HQ, Detailer HQ, The Driveway and the pay page, and 15 / 17 / 26 are the sizes the record, section and page roles below already draw at. The owner chose to name them rather than snap them to 14 / 16 / 18 / 22. A -plus step is one notch above the step it is named after and below the next, so no existing name moves; 26px is above the top, so it is 3xl. */ --t-2xs: 10px; /* dense meta, table sub-labels; the floor for a label (6 Oct 2026) */ --t-xs: 11px; /* chips, captions, card meta */ --t-sm: 12px; /* the workhorse — body text in cards and lists */ --t-base: 13px; /* primary body, list row titles */ --t-md: 14px; /* section headings, emphasized rows */ --t-md-plus: 15px; /* a record's name, a row that leads its card (the --type-record size) */ --t-lg: 16px; /* panel titles; also the iOS no-zoom floor for inputs */ --t-lg-plus: 17px; /* section headings, a stat tile's value, a pay button (the --type-section size) */ --t-xl: 18px; /* card headlines */ --t-xl-plus: 20px; /* a screen's or sheet's own title, a total, a close or chevron glyph */ --t-2xl: 22px; /* tab titles, KPI figures */ --t-3xl: 26px; /* page titles, a hero's headline figure (the --type-page size) */ /* ----- Spacing scale ----- Same method: 8px (286 uses), 10px (221), 6px (184), 12px (166) and 14px (108) are the real rhythm of this UI. --s-1 through --s-6 are the ones worth reaching for; the odd values in between stay literal until the rule that uses them is touched. */ --s-0: 2px; --s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 10px; --s-5: 12px; --s-6: 14px; --s-7: 16px; --s-8: 20px; --s-9: 24px; }