/* ============================================================ ProAudit "Audit Journal" theme — TOKENS + BASE + STANDARDS Contract: docs/superpowers/specs/2026-06-09-proaudit-unified-theme-design.md RULES: no raw hex outside this file's token block; pages reference var(--pa-*) only. Loaded ONLY via ProAuditThemeAssets.razor. ============================================================ */ :root { /* Surfaces */ --pa-paper: #f6f1ea; --pa-card: #fffaf3; --pa-card-tint: #fbf6ee; --pa-sidebar: #211c16; /* Text */ --pa-ink: #191510; --pa-muted: #706358; /* Tertiary text. This token USED to be #8a7d6e, which is 3.57:1 on --pa-paper, 3.86:1 on --pa-card and 3.73:1 on --pa-card-tint — enough for WCAG AA's large-text bar but not the 4.5:1 normal text needs. A property census found 1,361 of its ~1,470 uses are `color:`, i.e. it is a TEXT token that was ~93% failing, so it is fixed HERE rather than twinned, with the opt-OUT (--pa-faint-decor) carrying the exceptions. --pa-orange-deep below was censused the same day and got the same treatment for the same reason. --pa-sidebar-group keeps its opt-in twin: it is genuinely a minority-text token, and unlike faint it has no decor-vs-text split worth inverting. Now 4.61 / 4.99 / 4.81:1 on paper / card / tint. Verified: --pa-faint text only ever lands on those three surfaces — the dark sidebar uses the separate --pa-sidebar-* family, and nothing overrides this token to a light value, so darkening it cannot reduce contrast anywhere. */ --pa-faint: #786b5c; /* The pre-2026-08-06 --pa-faint, kept for the ~110 uses that carry no text contrast requirement — dots, bars, rules, borders, fills, scrollbar thumbs — plus ::placeholder (where being lighter than a real value is the point), :disabled controls (WCAG 1.4.3 exempts inactive components), decorative ::before/::after glyphs, and type large enough to pass at 3:1 anyway. Do NOT reach for this for anything a user has to read. */ --pa-faint-decor: #8a7d6e; --pa-sidebar-text: #c9bfb1; --pa-sidebar-text-bright: #f6f1ea; --pa-sidebar-group: #8d8275; /* Accessible twin of --pa-sidebar-group. That token is 4.49:1 on --pa-sidebar and fails WCAG AA by a hundredth for anything that is not "large" text; this one is 4.92:1. It exists as a token, rather than being hardcoded a third time, because pa-pages/*.css may not carry a raw colour and the CRM sidebar footer needs it. Opt in per element — do NOT redefine --pa-sidebar-group itself, because seven stylesheets read it and bumping it would re-skin CRM. */ --pa-sidebar-group-aa: #948979; /* Borders */ --pa-hair: #e3d8cb; --pa-hair-strong: #d9cab7; /* Brand */ --pa-orange: #dd9142; /* Was #9b672f, which cleared WCAG AA's 4.5:1 only on --pa-card (4.62:1) and failed on the other two house surfaces — 4.46:1 on --pa-card-tint, 4.27:1 on --pa-paper. Now 4.80 / 5.19 / 5.01:1 on paper / card / tint. This value used to live in a separate opt-in token, --pa-orange-deep-aa, whose comment said to leave --pa-orange-deep alone because "~500 declarations read it and most are borders, icons and fills". A census on 2026-08-06 measured the opposite: 376 of its 494 uses are `color:`, i.e. 76% TEXT. The twin was retired and its value promoted here. THERE IS DELIBERATELY NO --pa-orange-deep-decor TWIN, and adding one would be a bug. ProAuditLayout.razor rewrites THIS token per tenant for white-label branding (color-mix of their PrimaryColor, !important, at :root). A hardcoded twin is not in that override block, so anything reading a twin renders ProEstimate's orange on a branded tenant instead of theirs — which is exactly what --pa-orange-deep-aa did for the few hours it was wired into proaudit-components.css. Every consumer, text and non-text alike, must read --pa-orange-deep so branding flows through. Fix contrast here and in the layout's mix percentage, never with a parallel token. Dark surfaces are not a concern: they deliberately do not use this token. Links on the report hero band and inside pa-callout--danger use HelpTopicLink's OnBanner variant, which inherits currentColor. ONE CASE THIS FIX DOES NOT REACH: this token ON --pa-orange-tint. That ground composites to a warm cream, where the new value is 4.36:1 over --pa-paper and 4.52:1 over --pa-card-tint — still under 4.5:1 for normal text on the worst surface. The 16 rules that pair a tint BACKGROUND with this token as TEXT use color-mix(in srgb, var(--pa-orange-deep) 70%, var(--pa-ink)) instead, which is 6.43:1 and stays branded because it mixes the branded token rather than hardcoding. Reach for that same mix if you add another tinted chip. Icon-only wrappers on a tint are fine unmixed — 4.36:1 clears the 3:1 non-text bar. */ --pa-orange-deep: #925f2a; /* Orange TEXT. Point every orange `color:` here, never at --pa-orange itself. --pa-orange is the brand FILL: of its ~1,571 uses, 481 are backgrounds and 333 border-colors, and only 274 (17%) are `color:`. As TEXT it measures 2.28 / 2.46 / 2.38:1 on paper / card / tint — it fails not just AA's 4.5:1 but the 3:1 large-text and non-text bars as well, at every size. So unlike --pa-faint and --pa-orange-deep, this token must NOT be darkened: doing so would repaint every primary button, bar and fill in the app. The catch is that the correct answer INVERTS by ground. On the dark chrome --pa-orange is 6.60:1 and --pa-orange-deep is only 3.13:1 — so a blanket swap to the deep twin would REGRESS the sidebar and the hero band. Hence a resolved token: --pa-orange-deep by default, flipped back to --pa-orange on the dark grounds listed below the base rules. Both sides stay white-label branded, because ProAuditLayout rewrites both underlying tokens per tenant. Adding a dark-ground surface that carries orange text? Add it to that list — one line — instead of hardcoding --pa-orange at the callsite. */ --pa-orange-text: var(--pa-orange-deep); --pa-orange-fg: #16120e; --pa-orange-hover: #d0832f; --pa-orange-tint: rgba(221, 145, 66, .13); --pa-teal: #00a69c; --pa-teal-deep: #006d67; /* Semantic. SUCCESS AND WARNING ARE DELIBERATELY NOT THE BRAND HUES. Until 2026-08-08 --pa-ok-border WAS --pa-teal byte for byte, --pa-ok-fg WAS --pa-teal-deep, and --pa-warn-border WAS --pa-orange. Semantic state was therefore indistinguishable from brand chrome — an orange "warning" pill next to an orange primary button carried no information in its colour — and because ProAuditLayout rewrites --pa-orange per tenant, a white-label customer with a red PrimaryColor got a red warning state. Success moved to a true green (OKLCH H 148) and warning to a true yellow (H 100), away from teal's H 187 and brand orange's H 64. Separation from the brand fill measures dE-OK 9.0 and 9.2 — the band real systems ship at (Tailwind orange-500/amber-500 9.6, green-500/teal-500 11.3; Material amber-700/orange-700 8.5; Radix grass-9/teal-9 8.4). Both foregrounds clear AA on their own tint AND on all three house grounds (5.23-6.30:1), and both borders IMPROVED on the brand values they replaced (ok 2.92 -> 3.04:1, warn 2.46 -> 2.75:1 on --pa-card). Pinned by Semantic_state_is_perceptibly_distinct_from_the_brand_hues. */ --pa-ok-bg: #e8f6ea; --pa-ok-fg: #296a37; --pa-ok-border: #46a359; --pa-warn-bg: #f4f1dc; --pa-warn-fg: #71640b; --pa-warn-border: #ae9900; --pa-bad-bg: #f8e9e6; --pa-bad-fg: #963d30; --pa-bad-border: #c0584a; --pa-info-bg: #eef2f8; --pa-info-fg: #3d5a82; --pa-info-border: #7a93b8; --pa-neutral-fg: #706358; /* ADAS tier — muted plum, harmonized with the warm palette */ --pa-adas-bg: #f0eaf4; --pa-adas-fg: #5d4470; --pa-adas-border: #8a6da0; /* Subject category colors (Library / OEM-source family). ONE token per PositionStatementSubject enum value. Hues carried over from the retired lib-subj-* set (proaudit-library.css), with saturation/lightness pulled toward the warm Audit Journal palette. Adding a new PositionStatementSubject enum value = add ONE token here + ONE pa-subj-{EnumName} class in proaudit-components.css. */ --pa-subj-adas-calibration: #1d8a9e; --pa-subj-pre-post-repair-scanning: #0e8a64; --pa-subj-structural-repair: #56616f; --pa-subj-corrosion-protection: #b96a14; --pa-subj-glass-replacement: #2f7cad; --pa-subj-refinish-paint: #79951f; --pa-subj-airbag-restraint-system: #c44438; --pa-subj-wheel-alignment: #7a5bb5; --pa-subj-hybrid-ev-procedures: #34924b; --pa-subj-one-time-use-parts: #75808f; --pa-subj-adhesive-bonding: #cd5f1f; --pa-subj-mechanical-procedures: #5757b8; --pa-subj-tool-equipment-requirements: #7c4a1c; --pa-subj-material-specifications: #424f5e; --pa-subj-headlamp-lighting: #ab8410; --pa-subj-bumper-energy-absorption: #a52f25; --pa-subj-parts-and-procurement: #8c5d76; --pa-subj-general-collision-repair: #6b6258; /* Reader highlight palette (Library V3 reading room). Pastel fills for persisted text highlights + a deeper companion for swatches/markers. Consumed by pa-pages/library.css (liby-v3-highlight-*, selection menu, share-link markers) and by HighlightRenderer's lib-mark output. */ --pa-hl-yellow: #ffe9a8; --pa-hl-yellow-deep: #f4d03f; --pa-hl-pink: #fbc8d8; --pa-hl-pink-deep: #e88bb0; --pa-hl-green: #c6e5c5; --pa-hl-green-deep: #88c290; --pa-hl-blue: #bad4e6; --pa-hl-blue-deep: #7aaedb; /* Code console (script editor + the ADAS API strip in the rule dialog). A Catppuccin Mocha surface, deliberately outside the warm palette — it is a code-tooling chrome, not a page surface. THESE LIVED IN A `:root { }` BLOCK INSIDE TWO SCOPED .razor.css FILES AND THEREFORE NEVER EXISTED. Blazor's scoped-css rewriter appends the component's scope attribute to every selector, emitting `:root[b-u8j85ze0bt]`, which can never match because the scope attribute is only ever stamped on the component's own elements. Confirmed 2026-08-06 by reading the generated bundle and by getComputedStyle: both tokens resolved to the empty string, so .test-console and .snippet-toolbar painted NO background and the pale Catppuccin log colours were landing on the light dialog surface. Declaring them here is what makes the console dark, and is what makes the log-line colours (7.1–11.0:1 on --pa-code-bg) true rather than aspirational. */ --pa-code-bg: #1e1e2e; --pa-code-header-bg: #16161f; /* Kept as the literal it always was, not a color-mix of --pa-teal: Tokens() below only parses hex/rgb/var values, so a color-mix here would be invisible to the classification check and silently escape the contract. */ --pa-code-border: rgba(0, 166, 156, 0.25); /* Tables */ --pa-thead-bg: #f0e6da; --pa-thead-fg: #4e453d; --pa-row-border: #ede3d6; --pa-row-hover: #fbf4ea; --pa-row-selected: #f8ecdb; /* Type */ --pa-font-display: 'Source Serif 4', Georgia, serif; --pa-font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pa-font-numeric: 'Outfit', var(--pa-font-body); --pa-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace; /* Page shells are FLUID — they fill the viewport at every size. Every pa-pages/*.css shell references this token; set a px value here to re-cap all pages at once. */ --pa-page-max: none; /* Geometry & elevation */ --pa-radius: 10px; --pa-radius-sm: 8px; --pa-shadow-btn: 0 6px 14px rgba(139, 82, 28, .16); --pa-shadow-dialog: 0 24px 60px rgba(25, 21, 16, .35); /* Focus indicator. WAS rgba(221, 145, 66, .18), which composited to 1.15:1 on --pa-paper, 1.16:1 on --pa-card and 1.37:1 on --pa-sidebar against a WCAG 2.2 SC 2.4.11 bar of 3:1 — at 18% alpha it was decoration, not an indicator. The companion `border-color: var(--pa-orange)` in the :focus-visible rule below rescued bordered inputs; buttons, links and [role="button"] got nothing. Two rings, because the indicator has to separate from BOTH neighbours: an inner halo the colour of the ground it sits on, then the indicator itself in the resolved orange text token (>=4.38:1 on every house ground, and 6.60:1 on the dark chrome where it flips to the bright brand orange). Without the halo a ring around a PRIMARY BUTTON is --pa-orange-deep on --pa-orange: 2.11:1. The halo follows the same dark-ground list as --pa-orange-text, below. Pinned by Focus_ring_is_visible_against_every_ground_it_lands_on. */ --pa-focus-halo: var(--pa-card); /* ⚠ A CUSTOM PROPERTY THAT REFERENCES ANOTHER ONE IS SUBSTITUTED WHERE IT IS DECLARED, NOT WHERE IT IS USED. This line computes on :root, against :root's halo and orange-text, and descendants inherit the RESULT as a literal — so overriding --pa-focus-halo further down does NOT re-resolve this ring. The first version of this shipped with only the halo overridden on the dark grounds and a browser read showed .pa-nav-item still carrying `0 0 0 2px #fffaf3, 0 0 0 4px #925f2a`: a cream halo and the LIGHT indicator on the dark chrome. All 37 theme tests were green. --pa-orange-text does not have this problem because pages reference it directly from a real property (`color: var(--pa-orange-text)`), which IS resolved per element. Any block overriding the halo must therefore re-declare this ring too — pinned by Focus_ring_is_visible_against_every_ground. */ --pa-focus-ring: 0 0 0 2px var(--pa-focus-halo), 0 0 0 4px var(--pa-orange-text); --pa-scrim: rgba(25, 21, 16, .35); /* Z-index scale (aligned with MudBlazor defaults) */ --pa-z-sticky: 10; --pa-z-drawer: 1100; --pa-z-dialog: 1300; --pa-z-snackbar: 1400; --pa-z-tooltip: 1500; /* Motion — exactly two durations */ --pa-dur-fast: 140ms; --pa-dur-slow: 240ms; } /* ---------- Dark grounds: flip --pa-orange-text back to the bright brand orange ---------- On these surfaces --pa-orange is 6.60:1 and --pa-orange-deep only 3.13:1, so the default resolution is exactly backwards. Each entry below was confirmed by reading its actual background rule, NOT by its class name — "banner" and "command-bar" both SOUND dark and are not (.secadmin-banner-warning is --pa-orange-tint, .dash-command-bar is a 3% ink mix over --pa-paper), while .pa-nav-item carries no hint in its name and sits inside the dark sidebar. Verify the background before adding a selector here. */ .pa-sidebar, .hero, .mud-snackbar, .mud-tooltip, .export-dialog .export-header, /* .cm-tabs is the /m field-companion bottom tab bar (crm-mobile.css), whose background is var(--pa-sidebar) — the same ground as the desktop rail, so it needs the same flip. Added 2026-08-19 with the mobile shell. */ .cm-tabs, /* .sel-bar is the sticky multi-select toolbar from _SelectionBar.razor.css (background #1A1612). Scoped-CSS elements also match unscoped selectors, so registering it here is enough; added 2026-08-06 with the scoped-layer sweep. */ .sel-bar { --pa-orange-text: var(--pa-orange); /* Same list, same reason: the focus halo has to be the ground it sits on, or a cream ring paints around every focused control on the dark chrome. --pa-focus-ring is RE-DECLARED here, not just the halo — see the trap noted at its :root definition. Without this line the override is inert. */ --pa-focus-halo: var(--pa-sidebar); --pa-focus-ring: 0 0 0 2px var(--pa-focus-halo), 0 0 0 4px var(--pa-orange-text); } /* ---------- Base typography (ProAudit pages) ---------- */ .pa-app, .pa-layout { font-family: var(--pa-font-body); color: var(--pa-ink); background: var(--pa-paper); } /* ---------- Focus (never outline:none without replacement) ---------- Interactive elements only — programmatic focus targets like h1[tabindex="-1"] must not paint a ring. */ .pa-app :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible, .pa-layout :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: none; box-shadow: var(--pa-focus-ring); border-color: var(--pa-orange); } /* ---------- Skeletons ---------- */ .pa-skeleton { position: relative; overflow: hidden; background: var(--pa-hair); border-radius: var(--pa-radius-sm); } .pa-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--pa-card-tint), transparent); animation: pa-shimmer 1.4s infinite; } .pa-skeleton--text { height: .85em; border-radius: 4px; } .pa-skeleton--row { height: 42px; } .pa-skeleton--card { height: 110px; border-radius: var(--pa-radius); } @keyframes pa-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ---------- Scrollbars (inner panes) ---------- */ .pa-scroll { scrollbar-width: thin; scrollbar-color: var(--pa-hair-strong) transparent; } .pa-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .pa-scroll::-webkit-scrollbar-thumb { background: var(--pa-hair-strong); border-radius: 4px; } .pa-scroll::-webkit-scrollbar-track { background: transparent; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .pa-app *, .pa-layout *, .pa-app *::before, .pa-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================================ MUDBLAZOR OVERRIDES — make Mud controls indistinguishable from pa-* Scope: ProAudit routes only (theme css only loads there), but we still avoid bare element selectors. ============================================================ */ /* Buttons */ .pa-layout .mud-button-filled-primary, .mud-dialog .mud-button-filled-primary { background: var(--pa-orange); color: var(--pa-orange-fg); font-family: var(--pa-font-body); font-weight: 700; border-radius: var(--pa-radius); box-shadow: var(--pa-shadow-btn); text-transform: none; } .pa-layout .mud-button-filled-primary:hover, .mud-dialog .mud-button-filled-primary:hover { background: var(--pa-orange-hover); } .pa-layout .mud-button-outlined, .mud-dialog .mud-button-outlined { border-color: var(--pa-hair-strong); color: var(--pa-ink); font-family: var(--pa-font-body); font-weight: 600; border-radius: var(--pa-radius); text-transform: none; } .pa-layout .mud-button-text, .mud-dialog .mud-button-text { color: var(--pa-orange-deep); text-transform: none; font-weight: 600; } /* Inputs */ .pa-layout .mud-input-control .mud-input, .mud-popover-provider .mud-input, .mud-dialog .mud-input { font-family: var(--pa-font-body); font-size: .86rem; color: var(--pa-ink); } .pa-layout .mud-input-outlined .mud-input-outlined-border { border-color: var(--pa-hair-strong); border-radius: var(--pa-radius-sm); } .pa-layout .mud-input-control.mud-input-control-focused .mud-input-outlined-border, .mud-dialog .mud-input-control.mud-input-control-focused .mud-input-outlined-border { border-color: var(--pa-orange); box-shadow: var(--pa-focus-ring); } /* Dialog container (content migrates to pa-dialog classes per page) */ .mud-dialog { background: var(--pa-card); border-radius: 14px; box-shadow: var(--pa-shadow-dialog); } .mud-dialog, .mud-popover .mud-list, .mud-menu { font-family: var(--pa-font-body); } .mud-dialog .mud-dialog-title { font-family: var(--pa-font-display); font-weight: 700; color: var(--pa-ink); } .mud-overlay-dark { background: var(--pa-scrim); } /* Select / autocomplete popovers, menus */ .mud-popover .mud-list { background: var(--pa-card); border: 1px solid var(--pa-hair); border-radius: var(--pa-radius-sm); } .mud-popover .mud-list-item:hover { background: var(--pa-row-hover); } .mud-popover .mud-list-item.mud-selected-item { background: var(--pa-row-selected); color: var(--pa-ink); } /* DataGrid */ .pa-layout .mud-table, .pa-layout .mud-data-grid { background: var(--pa-card); border: 1px solid var(--pa-hair); border-radius: var(--pa-radius); font-family: var(--pa-font-body); } .pa-layout .mud-table-head .mud-table-cell, .pa-layout .mud-data-grid .mud-table-cell.mud-header-cell { background: var(--pa-thead-bg); color: var(--pa-thead-fg); font-weight: 700; font-size: .76rem; } .pa-layout .mud-table-row:hover .mud-table-cell { background: var(--pa-row-hover); } /* Switch, progress, tooltip, snackbar, chips */ .pa-layout .mud-switch .mud-switch-track { background: var(--pa-hair-strong); } .pa-layout .mud-switch.mud-checked .mud-switch-track, .pa-layout .mud-switch .mud-switch-track.mud-color-primary { background: var(--pa-teal); } .pa-layout .mud-progress-circular, .pa-layout .mud-progress-linear { color: var(--pa-orange-text); } /* max-width uses !important because MudBlazor's popover JS sets an inline `max-width: none` on the shown tooltip, which would otherwise let long hint text span the whole screen. */ .mud-tooltip { background: var(--pa-ink); color: var(--pa-card); font-family: var(--pa-font-body); font-size: .74rem; border-radius: 6px; max-width: min(360px, 92vw) !important; white-space: normal !important; overflow-wrap: break-word; line-height: 1.45; padding: 8px 11px; text-align: left; } .mud-snackbar { font-family: var(--pa-font-body); border-radius: var(--pa-radius); } .pa-layout .mud-chip { font-family: var(--pa-font-body); border-radius: 100px; }