/* CleanChain (CC) — design tokens * * Source: req/ux/style_guide.md §2.1 (deep navy-blue primary — the same * blue as the SYS guide; warm-tan secondary). Rebranded from teal * 2026-06-12 to match the refreshed /style-guides/cc.html. * * Scoped under [data-theme="cc"]. See sys.css for the App-chrome * contract every theme exposes. */ [data-theme="cc"] { /* App-chrome contract */ --app-header-bg: hsl(204, 38%, 28%); --app-header-fg: hsl(0, 0%, 100%); --app-header-hover-bg: hsl(204, 38%, 34%); --app-primary: hsl(204, 38%, 28%); --app-primary-hover: hsl(204, 38%, 34%); --app-secondary: #C28D6E; --app-secondary-hover: #A77254; /* Shadcn-style palette */ --primary: hsl(204, 38%, 28%); --primary-foreground: hsl(0, 0%, 100%); --secondary: #C28D6E; --secondary-foreground: hsl(0, 0%, 100%); --accent: #E0CF88; --accent-foreground: hsl(0, 0%, 100%); --destructive: hsl(350, 80%, 46%); --destructive-foreground: hsl(0, 0%, 100%); --muted: hsl(216, 14%, 93%); --muted-foreground: hsl(220, 6%, 46%); --background: hsl(216, 20%, 95%); --foreground: #404848; --border: hsl(0, 0%, 85%); --input: hsl(0, 0%, 75%); --ring: hsl(204, 38%, 28%); --card: hsl(0, 0%, 100%); --card-foreground: #404848; --card-border: hsl(0, 0%, 90%); --sidebar: hsl(0, 0%, 96%); --sidebar-primary: hsl(204, 38%, 28%); --sidebar-primary-fg: hsl(0, 0%, 100%); --sidebar-foreground: #404848; --sidebar-border: hsl(0, 0%, 88%); --popover: hsl(0, 0%, 100%); --popover-border: hsl(0, 0%, 90%); --elevate-1: rgba(0,0,0,0.03); --elevate-2: rgba(0,0,0,0.08); /* APP-CCAPP §3.3 / §7 — the "Buy Credits" CTA is a dark green, distinct from * the blue primary so the upsell reads as its own action. Shown on the SDS * page when credits are low/exhausted (CTA wired in FTR-D) and on the * buy-credits page submit button. */ --cc-buy-credits: #1E6B3B; --cc-buy-credits-hover: #17532E; --cc-buy-credits-fg: hsl(0, 0%, 100%); /* APP-CCAPP §2.7 — Inventory page. The "KG uncomputable" row flag (a volume * UOM was chosen but the SDS carried no density, so kg can't be computed): * amber tint + text, distinct from the blue primary and the destructive red. */ --cc-flag-bg: hsl(45, 90%, 94%); --cc-flag-fg: hsl(32, 80%, 32%); --cc-flag-border: hsl(42, 80%, 70%); /* §2.7 (BUG-E78Y8-XC) — an SDS uploaded AFTER the period was submitted is not * part of the frozen footprint: the Inventory row's left status bar reads * BLACK to flag "added after submission" (auto-excluded). Dark-mode override * below lifts it to near-white so it still reads as a distinct status edge. */ --cc-excluded-late: hsl(0, 0%, 8%); /* APP-CCAPP §2.10 — the cc_fad guided journey (step nav + progress states). * done = green family, busy/current = the CC blue, attention = the * --cc-flag-* amber family above, todo = the muted grays. Hex literals * belong here in the theme file (UX-STY-024 forbids them only as var() * fallbacks in component code). */ --cc-step-done: #2E7D43; --cc-step-done-bg: #E3F2E7; --cc-step-done-border: #9CCBA8; --cc-step-busy: hsl(204, 38%, 28%); --cc-step-busy-bg: hsl(204, 38%, 92%); --cc-step-todo: hsl(220, 6%, 46%); --cc-step-todo-bg: hsl(216, 14%, 93%); } /* Dark mode for CC page content. * * Same defect class as BUG-TRLZT-RL (tgt.css): the CC views are styled * against the tokens above via var() at use time, so the .dark class on * never reached them — only the Tailwind-styled AppFrame chrome * flipped. Re-mapping the NEUTRAL surface/text tokens (and the pale status * fills) here inverts the whole CC surface from one block. * * Kept un-flipped: the App-chrome contract (header is branded navy in both * modes), --secondary/--accent (used as fills under white foregrounds), and * --cc-buy-credits (dark green CTA reads on dark). --primary lightens to * 204 38% 40% per style_guide.md §2.3 (WCAG contrast on dark surfaces). * Status FOREGROUNDS (--destructive, --cc-step-*, --cc-flag-fg) are * lightened — they double as text on the darkened panels, where the light * values fall below legibility. * * Specificity: `.dark [data-theme="cc"]` (0,2,0) beats the base * `[data-theme="cc"]` (0,1,0), and the AppFrame's data-theme div is always * a descendant of , so this wins without !important. */ .dark [data-theme="cc"] { --primary: hsl(204, 38%, 40%); /* Neutral surfaces + text */ --background: #16181c; --foreground: #e7e9ec; --muted: #262a30; --muted-foreground: #aab0b8; --border: #353a42; --input: #4a505a; --ring: hsl(204, 45%, 52%); --card: #1f2227; --card-foreground: #e7e9ec; --card-border: #353a42; --sidebar: #1a1d21; --sidebar-foreground: #e7e9ec; --sidebar-border: #353a42; --popover: #1f2227; --popover-border: #353a42; --elevate-1: rgba(255,255,255,0.04); --elevate-2: rgba(255,255,255,0.09); /* Status foregrounds — lightened to read as text on the dark panels. */ --destructive: hsl(350, 70%, 62%); --cc-flag-fg: #E8BD78; --cc-step-done: #46A05F; --cc-step-busy: hsl(204, 50%, 60%); --cc-step-todo: #9aa1a9; /* Pale status / accent fills → dark tints. Their paired foregrounds are the lightened status colours above or --foreground (now light). */ --cc-flag-bg: #2e2410; --cc-flag-border: #6b5a2a; --cc-step-done-bg: #16331f; --cc-step-done-border: #2e5c3a; --cc-step-busy-bg: #15314a; --cc-step-todo-bg: #262a30; /* §2.7 (BUG-E78Y8-XC) — near-white on dark so the "added after submission" * status edge stays the visually-extreme bar it is in light mode. */ --cc-excluded-late: hsl(0, 0%, 92%); } /* BUG-6WJYV-NS — the CleanChain Scorecard reuses the shared * (components/target/scorecard-view.tsx), which styles its section cards with * `.tgt-card`/`.tgt-card-body` and reads a handful of `--tgt-*` tokens. Both * are scoped to [data-theme="tgt"], so under the CC theme they were inert — * the sections rendered background-less and ran together ("all white, no * chunking"). Re-home the tokens + card classes the body reads to CleanChain * semantic tokens, scoped to the scorecard wrapper, so the sections group into * distinct cards exactly like the tgt_fad scorecard. Because the targets are * the CC semantic tokens (which flip in dark mode above), this follows dark * mode for free. */ [data-theme="cc"] .cc-scorecard-scope { --tgt-text-primary: var(--foreground); --tgt-text-secondary: var(--muted-foreground); --tgt-muted-gray: var(--muted-foreground); --tgt-border-gray: var(--border); --tgt-light-gray: var(--muted); --tgt-white: var(--card); --tgt-teal: var(--primary); --tgt-teal-light: var(--cc-step-busy-bg); --tgt-on-color: var(--primary-foreground); } [data-theme="cc"] .cc-scorecard-scope .tgt-card { background-color: var(--card); border: 1px solid var(--card-border); border-radius: 8px; box-shadow: 0 2px 4px var(--elevate-1); } [data-theme="cc"] .cc-scorecard-scope .tgt-card-body { padding: 1.5rem; } [data-theme="cc"] .cc-scorecard-scope .tgt-heading-lg { font-size: 1.5rem; font-weight: 700; color: var(--foreground); line-height: 1.3; }