/* ========================================================================== alliteration. — design tokens THE ONLY PLACE COLORS AND DIMENSIONS ARE DEFINED. No app file declares a hex value. Components reference var(--accent) and friends, so setting data-app on re-themes the entire shell. Neutrals below were already identical across BackBone, ShopStock, ErrorEngine and GivingGauge, so consolidating them here changed nothing visually. Only the accent triplet varies per app. ========================================================================== */ :root { /* ---- Surfaces & text (shared by every app) ---------------------------- */ --bg: #F4F6F8; --card: #FFFFFF; --ink: #1C2430; --muted: #6B7684; --faint: #9CA3AF; --line: #E4E8EC; --line-soft: #EDF0F3; --wordmark-ink: #231F20; /* ---- Semantic status colors ------------------------------------------ These mean "good/bad", never "which app". GivingGauge's gauge depends on green staying a GRADE color rather than a brand color, which is why its accent is gold. Do not repoint --success at an accent. */ --success: #3D9A5C; --success-dk: #2F7A48; --success-tint: #EAF5EE; --warn: #B4791E; --warn-dk: #8A5C16; --warn-tint: #FCF3E3; --danger: #C0392B; --danger-dk: #96271B; --danger-tint: #FDECEA; --danger-line: #F5C6C0; /* ---- Dimensions ------------------------------------------------------- */ --radius: 12px; --radius-sm: 8px; --radius-md: 12px; --radius-pill: 99px; --shell-header-h: 60px; /* Content width. The prototype capped this at 1180px, which suits prose but wastes half a wide screen on a data table. Apps here are dense: inventory rows, error logs, rosters. They should use the width available. */ --shell-max-w: none; --shell-max-w-prose: 1180px; --rail: 248px; --gutter: 20px; --gutter-sm: 12px; --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --shadow-pop: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .04); --speed: .14s; /* ---- Hub (the "All apps" landing view) ------------------------------- The hub is not one of the five apps, so it carries its own accent. This green is the shell's own color, used when no app is selected. */ --hub: #52A246; --hub-deep: #3F8236; --hub-tint: #EDF6EB; /* ---- Notifications panel (header bell dropdown) ------------------------ Not one of the nine apps and not a routed screen (no data-app value of its own), so like --hub above it gets a fixed color rather than reading var(--accent), which would otherwise shift with whatever app happens to be open behind it. Same slate used before this became a header panel. */ --notif: #3E4C59; --notif-deep: #2F3B45; --notif-tint: #EAECEF; /* ---- Tier badges (BackBone scorecard, shown on the hub too) ---------- Fixed per tier, NOT app accents: an A-tier account is blue whichever app is on screen. Declared here so no app file needs a hex. */ --tier-a: #1B5DAB; --tier-b: #52A246; --tier-c: #B4791E; --tier-d: #9CA3AF; /* ---- Amber (ShopStock "Ordered" state and its button) ----------------- Distinct from --warn, which means "needs attention". Amber here means "in progress, nothing wrong", so the two must not be merged. */ --amber: #A67C00; --amber-tint: #FEF6E0; --amber-line: #F5E4B0; --amber-hover: #FBEEC8; /* A bright, saturated gold for celebration marks (ShopStock's "nothing needs ordering" star). Deliberately NOT --amber: that is a dark text color chosen for contrast against a pale background, and it reads muddy when it fills a large shape. */ --gold-bright: #F5B301; --gold-deep: #D99400; /* ---- Status hues (BackBone) ------------------------------------------- BackBone encodes MEANING in color, not decoration: a lead's stage, what contact details are on file, how loaded an account manager is. Those need hues the semantic tokens above do not cover, so they get their own scale. Each is tint (background) + ink (text on that tint). */ --hue-blue: #1D4ED8; --hue-blue-tint: #E3EBFD; --hue-blue-deep: #1E40AF; --hue-indigo: #4F46E5; --hue-indigo-tint: #EEF2FF; --hue-violet: #6D28D9; --hue-violet-tint: #EDE9FE; --hue-sky: #0369A1; --hue-sky-tint: #E0F2FE; --hue-forest: #1E7A44; --hue-forest-tint: #E4F4EA; --hue-clay: #B42318; --hue-clay-tint: #FDE7E5; --hue-clay-line: #F5B5B0; /* ---- Categorical chart palette --------------------------------------- Charts need colors chosen to be TOLD APART, which is a different job from the semantic and per-app colors above. Reusing those produced real bugs: TravelTrack's green accent against --success made one indistinguishable ring, and the --hue-* set clusters four values in the blues. These nine are spaced for perceptual separation (minimum ~120 on a weighted RGB distance) and all clear 3:1 contrast against --card, so a small legend swatch stays visible. Order matters: series rotate through 1..9 in sequence, so adjacent numbers are the most-separated pairs, not merely different. */ --chart-1: #1D4ED8; /* blue */ --chart-2: #E8590C; /* orange */ --chart-3: #2E9E5B; /* green */ --chart-4: #7C3AED; /* violet */ --chart-5: #A16207; /* bronze */ --chart-6: #0E9AA7; /* teal */ --chart-7: #9F1239; /* crimson */ --chart-8: #D946A0; /* magenta */ --chart-9: #57606A; /* slate */ /* ---- Misc surfaces ---------------------------------------------------- */ --on-accent: #FFFFFF; --footer-bg: #FCFDFD; --dot-idle: #C9CFD6; --row-hover: #FAFAFA; --head-bg: #F9FAFB; /* ---- Default accent (shell chrome before an app is chosen) ------------ Defaults to the hub green so the "All apps" view is themed correctly on first paint, before data-app is set. */ --accent: var(--hub); --accent-deep: var(--hub-deep); --accent-tint: var(--hub-tint); } /* ========================================================================== PER-APP ACCENTS Setting re-themes everything downstream. Adding an app = add a block here + one file in apps/ + two lines in js/registry.js. ========================================================================== */ body[data-app="hub"] { --accent: var(--hub); --accent-deep: var(--hub-deep); --accent-tint: var(--hub-tint); } body[data-app="backbone"] { --accent: #1B5DAB; --accent-deep: #164B8A; --accent-tint: #EAF1F9; } body[data-app="shopstock"] { --accent: #E36325; --accent-deep: #C24F16; --accent-tint: #FCEEE6; } body[data-app="errorengine"] { --accent: #745DA8; --accent-deep: #5B4788; --accent-tint: #F0ECF7; } /* GivingGauge is GOLD, not green. The brief listed #3D9A5C, but that value is --success in all four apps, and this app's gauge renders green/gold/red as GRADE outcomes. A green accent would make the app chrome match its own "grade A" color. Gold is what the app actually ships. */ body[data-app="givinggauge"] { --accent: #D5A029; --accent-deep: #A87A16; --accent-tint: #FBF2E1; } /* Sticky Notes is a SITE WORK screen: not an app, not part of Shared. Muted gold rather than a bright post-it yellow, because the accent themes the whole chrome and a fluorescent rail is unreadable. The paper colours below are the ones that actually appear on the notes. */ body[data-app="stickies"] { --accent: #C9A227; --accent-deep: #9A7A18; --accent-tint: #FAF3DF; } /* ---- Sticky note paper ------------------------------------------------- Five paper colours plus a matching ink for each, kept here rather than in apps/stickies.js like every other colour in this repo. Ink is a darkened version of the same hue so text stays legible on its own note. */ :root { --sticky-yellow: #FBF0B2; --sticky-yellow-edge: #EFDF8A; --sticky-green: #D8EFC2; --sticky-green-edge: #BEE0A0; --sticky-blue: #CFE4F5; --sticky-blue-edge: #ABCDEB; --sticky-pink: #F8D6DE; --sticky-pink-edge: #EDB6C3; --sticky-grey: #E4E7EA; --sticky-grey-edge: #CDD2D7; --sticky-ink: #2E2A20; } /* Settings is a SHELL screen, not one of the five apps. Deliberately neutral grey: it belongs to the shell, and giving it a brand color would imply it is another app in the lineup. */ body[data-app="settings"] { --accent: #6B7684; --accent-deep: #55606D; --accent-tint: #EEF1F4; } /* Notifications is a shell-level screen like Settings, not one of the nine apps, so it gets its own neutral slate rather than borrowing a real app's brand color. Same slate as --notif below (kept in sync on purpose — the header bell uses the fixed token since it has no data-app scope of its own, this block themes the routed screen when it's the active app). */ body[data-app="notifications"] { --accent: #3E4C59; --accent-deep: #2F3B45; --accent-tint: #EAECEF; } /* TravelTrack's accent is the EXACT fill from the vector logo file (assets/logos/traveltrack-mark.svg / -wordmark.svg), corrected Aug 2026 from an earlier hand-sampled #51A446. It is #52A246 — the same green as --hub, the "All apps" landing view's own color, which is intentional: both trace back to the same brand green. Deep/tint below are shared with --hub-deep/--hub-tint rather than a fresh pair, since a second near-identical green would just be noise. */ body[data-app="traveltrack"] { --accent: #52A246; --accent-deep: #428238; --accent-tint: #EFF7EE; } /* CrewCore's accent is RED, per the logo lineup. An earlier pass shipped this block with #4A90E2 (blue, corrected Aug 3, 2026), then with #D61623 (a red, but not quite the right one). This is now the EXACT fill from the vector logo file (assets/logos/crewcore-mark.svg / -wordmark.svg), corrected Aug 2026: #E1251B. */ body[data-app="crewcore"] { --accent: #C83E73; --accent-deep: #A32E5B; --accent-tint: #FBEDF3; } /* PromoPro. Red, from the Aug 14 2026 logo lineup. This is the value CrewCore used to hold: the lineup moved CrewCore to raspberry and gave the red to PromoPro, so the two are no longer near-identical in the rail. */ body[data-app="promopro"] { --accent: #E31E2D; --accent-deep: #B81824; --accent-tint: #FDEBEC; } /* MailMe's accent is the EXACT fill from the vector logo file (assets/logos/mailme-mark.svg / -wordmark.svg), corrected Aug 2026 from an earlier hand-sampled #85A0C6: a slate/muted blue, deliberately quieter than BackBone's or CrewCore's colors since this app sends real email once built. */ body[data-app="mailme"] { --accent: #8CA9CC; --accent-deep: #7087A3; --accent-tint: #F5F7FA; } /* TeleTally's accent is the EXACT fill from the vector logo file (assets/logos/teletally-mark.svg / -wordmark.svg), corrected Aug 2026 from an earlier hand-sampled #282A72 (too indigo/purple) — the logo's dark navy is #000B8C. The periwinkle-blue circle stays in the SVG mark itself rather than becoming a second CSS variable (only one accent per app in this scale). */ body[data-app="teletally"] { --accent: #000B8C; --accent-deep: #000970; --accent-tint: #E8E9F5; } /* WebsiteWidget's accent is the EXACT fill from the vector logo file (assets/logos/websitewidget-mark.svg / -wordmark.svg): teal, corrected Aug 2026 from an earlier hand-sampled #02A9A5. */ body[data-app="websitewidget"] { --accent: #00BBB4; --accent-deep: #009690; --accent-tint: #E8F9F8; } /* StitchSense. Magenta, chosen to match the coverage overlay the estimator paints over customer artwork: the AM sees the same colour on the picture and in the app chrome, so the overlay reads as "this app measured that" rather than as an unexplained highlight. Distinct from CrewCore's raspberry (#C83E73) and PromoPro's red (#E31E2D) in the rail. */ body[data-app="stitchsense"] { --accent: #D61F7A; --accent-deep: #AE1862; --accent-tint: #FCEBF3; } /* MarketMachine. PROVISIONAL VIOLET, not off a logo file. The palette is crowded by this point: blue (BackBone), orange (ShopStock), muted purple (ErrorEngine), gold (GivingGauge), green (TravelTrack), raspberry (CrewCore), red (PromoPro), slate (MailMe), navy (TeleTally), teal (WebsiteWidget) and magenta (StitchSense) are all taken. This violet is saturated enough to read as its own colour beside ErrorEngine's greyer #745DA8 at rail-dot size, but it is a placeholder chosen by elimination. CHECK IT AGAINST THE LOGO LINEUP SHEET and correct it here before the app has been in front of the team long enough for the colour to stick. CrewCore went blue -> red -> the exact logo red precisely because that check was skipped the first time. */ body[data-app="marketmachine"] { --accent: #6E1E2B; --accent-deep: #55161F; --accent-tint: #F6EBED; } /* ========================================================================== COMPATIBILITY ALIASES Ported app markup references its own old variable names. Rather than find-and-replace across 10k+ lines of working HTML (and risk changing behaviour), the old names are aliased to the new ones. New code should use --accent. These exist so ports drop in unmodified. ========================================================================== */ /* ErrorEngine used --purple / --purple-deep throughout. */ body[data-app="errorengine"] { --purple: var(--accent); --purple-deep: var(--accent-deep); } /* BackBone aliased its accent to --green* (a leftover from an earlier palette). */ body[data-app="backbone"] { --green: var(--accent); --green-dk: var(--accent-deep); --green-tint: var(--accent-tint); } /* ErrorEngine also referenced a bare --green for status. */ body[data-app="errorengine"] { --green: var(--success); }