/* ============================================================ CougarDesk Design Tokens — v2 · Direction "Warm Desk" (1b) ------------------------------------------------------------ A three-tier system that replaces the flat --apu-* variables. TIER 1 Primitives — raw brand + neutral + hue values TIER 2 Semantic — what a color MEANS (status, priority, feedback) TIER 3 Surface — what a color is FOR (bg / text / line) Components only ever reference TIER 2 + TIER 3. Dark mode redefines the SURFACE tier once — every component follows. The bottom section remaps CougarDesk's existing Bootstrap class names onto these tokens, so this can land incrementally. ============================================================ */ /* ---- Webfonts: load the REAL brand faces (fixes audit #2) ---- SANS ONLY, on purpose. APU sets body copy in Minion Pro 18px serif, which is right for marketing prose and wrong for a dense ticket queue — and the two surfaces that might have wanted a serif don't need this one: inbound email HTML carries its own fonts, and print.hbs is self-contained on Georgia (no webfont). So the serif token was retired rather than left imported-but-unused. See docs/design/BRAND_GUIDELINES.md. The Typekit kit still serves minion-pro alongside proxima-nova — that is kit configuration on the Adobe side, not something this file can trim. Removing it there would save the extra face; nothing here references it. CSP note (CD-1853): the kit sheet @imports a usage ping from p.typekit.net. Both hosts must be in styleSrc in src/app.js. If that ping is ever blocked again you get a style-src violation on every page load that LOOKS like a font failure but is not — the @font-face URLs all live on use.typekit.net, so the faces still load. Check document.fonts.check('700 14px proxima-nova') before believing the console. */ @import url("https://use.typekit.net/zpp4cyv.css"); /* proxima-nova (+ unused minion-pro) */ @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&display=swap"); :root { /* ═══ TIER 1 · PRIMITIVES ═══ */ /* Brick ramp — ONE red, reconciled with the logo (fixes audit #1) */ --cd-brick-900:#6E2224; --cd-brick-800:#7D2932; --cd-brick-700:#9D2E34; /* core brand red — wordmark, primary */ --cd-brick-600:#B23A40; --cd-brick-500:#CA3940; /* light brick — focus, hover accents */ --cd-vibrant:#E4002B; /* PMS Red 032 — reserved for rare emphasis only */ /* Warm neutral ramp */ --cd-white:#FFFFFF; --cd-warm-50:#FAF8F4; --cd-warm-100:#F2EDE3; /* the existing page bg — kept */ --cd-warm-150:#EDE7DB; --cd-warm-200:#E2DBCE; --cd-warm-300:#CFC6B4; --cd-warm-400:#B3A992; --cd-warm-500:#857D6F; --cd-warm-600:#6B655C; --cd-warm-700:#55504A; --cd-bone:#ECEAE8; --cd-taupe:#D8D0BB; --cd-slate:#252425; /* warm near-black (APU slate) */ /* Neutral grey ramp — cooler than the warm ramp above, and deliberately so. The KB management design grounds on --cd-bone with grey hairlines rather than the app's warm cream and warm lines; these are the two values that ramp has and the warm one does not. Do NOT reach for these outside the KB admin surface — mixing the two ramps in one view is what makes a palette look accidental. */ --cd-grey-200:#D8D4D2; /* neutral hairline */ --cd-grey-600:#5B5859; /* neutral muted text */ /* APU gold — the bright accent the KB design uses for "Planned"/"Inherited" badges. Distinct from --cd-amber, which is a desaturated STATUS hue; this is a flat brand yellow and only ever carries --cd-slate ink. */ --cd-gold:#EFD920; /* Status/feedback hues — desaturated & earthy so they sit beside brick */ --cd-amber:#C08A2D; --cd-green:#3F7A5E; --cd-blue:#3E6B8A; --cd-plum:#8E5468; /* ═══ TIER 2 · SEMANTIC ═══ */ /* Ticket status — fg (text/dot) + bg (chip fill). Light values. */ --cd-status-new-fg:#8A6118; --cd-status-new-bg:#F3E6CB; --cd-status-open-fg:#8A2A2E; --cd-status-open-bg:#F2E1E1; /* brand-tied */ --cd-status-pending-fg:#2C5170; --cd-status-pending-bg:#E3EBF1; --cd-status-on_hold-fg:#55504A; --cd-status-on_hold-bg:#E7E1D5; /* dark grey */ --cd-status-solved-fg:#2C2A28; --cd-status-solved-bg:#DAD3C6; /* near-black on warm grey */ --cd-status-closed-fg:#8A8175; --cd-status-closed-bg:#EFEAE0; /* light grey */ --cd-status-spam-fg:#7A3F53; --cd-status-spam-bg:#F0E1E7; --cd-status-merged-fg:#857D6F; --cd-status-merged-bg:#EEE9DF; /* Solid status fills (bold badge style) + text-on color */ --cd-status-new-solid:#EBB537; --cd-status-new-on:#3A2A05; --cd-status-open-solid:#B23A40; --cd-status-open-on:#FFFFFF; --cd-status-pending-solid:#3E6B8A; --cd-status-pending-on:#FFFFFF; --cd-status-on_hold-solid:#6B655C; --cd-status-on_hold-on:#FFFFFF; --cd-status-solved-solid:#2C2A28; --cd-status-solved-on:#FFFFFF; --cd-status-closed-solid:#B3A896; --cd-status-closed-on:#33302A; --cd-status-spam-solid:#8E5468; --cd-status-spam-on:#FFFFFF; --cd-status-merged-solid:#B3A896; --cd-status-merged-on:#33302A; /* Priority — dot / label color */ --cd-priority-low:#A79C88; --cd-priority-normal:#6B655C; --cd-priority-high:#C08A2D; --cd-priority-urgent:#CA3940; /* Feedback (alerts, toasts, inline validation) */ --cd-success-fg:#2C5A44; --cd-success-bg:#E1EEE6; --cd-success:#3F7A5E; /* -warning-fg was #8A6118, which measured UNDER AA against the very surface it is paired with: 4.47:1 on --cd-warning-bg (that is the .alert-warning pairing below, so every warning alert in the app was fractionally short) and 4.19:1 on --cd-warning-bg-hover. #7A5614 is the lightest value that clears 4.5:1 on all five light surfaces it lands on — warning-bg 5.36 · bg-hover 5.02 · raised 6.63 · surface 5.68 · sunken 6.15 Darkening ink on light grounds can only improve contrast, so no consumer regresses. The dark half (#E0B25A) is untouched: it sits on the composited amber tint at 6.83:1 already. */ --cd-warning-fg:#7A5614; --cd-warning-bg:#F3E6CB; --cd-warning:#C08A2D; --cd-danger-fg:#8A2A2E; --cd-danger-bg:#F2E1E1; --cd-danger:#B23A40; --cd-info-fg:#2C5170; --cd-info-bg:#E3EBF1; --cd-info:#3E6B8A; /* Ink for text sitting ON the solid feedback hues above — the same role the status tier spells --cd-status-*-on. No dark twin: --cd-*-bg and --cd-*-fg flip for dark but the solid hues themselves do NOT, so the ink on them must not either. Amber is the one that matters, because --cd-warning is the lightest of the four solids. Measured against #C08A2D, for the ~11px/600 text these appear on (normal text, so AA is 4.5:1 with no large-text exemption): #FFFFFF 3.04:1 fails #3A2A05 4.57:1 passes by 0.07 — the fill becomes load-bearing #2E2104 5.18:1 passes by 0.68 <- chosen #3A2A05 is what --cd-status-new-on uses, and matching it was the original reason to pick it. But that ink sits on #EBB537 at 7.40:1; on the darker warning fill the same value is a far thinner pass, so "they match" was weaker than it looked. #2E2104 is six steps darker, indistinguishable at badge size, and survives --cd-warning drifting a shade lighter later. Two call sites: .badge-warning (tokens.css) and the hover ink on .btn-outline-warning.btn-note-inactive (main.css). */ --cd-success-on:#FFFFFF; --cd-warning-on:#2E2104; --cd-danger-on:#FFFFFF; --cd-info-on:#FFFFFF; /* One step deeper than --cd-info-bg, for hovering a row that is ALREADY tinted (the unread notification item). --cd-surface-hover cannot serve there: it is what a read row hovers to, so an unread row would lose its tint on hover and read as already-read. */ --cd-info-bg-hover:#D6E3EC; /* ── Amber depth steps (CD-1891) ── main.css carried 22 distinct amber literals for what is really six roles. Three roles already had tokens (--cd-warning / -bg / -fg); these are the three that did not, plus a ring. -bg-hover one step past --cd-warning-bg, for a surface that is ALREADY amber and has to deepen (hover, macro-applied, will-change). -border the hairline between an amber surface and its neighbour; too light for --cd-warning, too dark for --cd-warning-bg. -fg-strong ink for a hovered amber control, one step past --cd-warning-fg. -ring focus/attention ring. Existed only as rgba() literals, which the hex guard cannot see — that is how Bootstrap amber (rgba(255,193,7,…)) and Tailwind yellow-300 (rgba(250,204,21,…)) both ended up in the same file. */ --cd-warning-bg-hover:#F0DFB4; --cd-warning-border:#DFC98A; --cd-warning-fg-strong:#533F03; --cd-warning-ring:rgba(192,138,45,.35); /* ═══ TIER 3 · SURFACE (the layer dark mode flips) ═══ */ --cd-surface:#F2EDE3; /* app background */ --cd-surface-raised:#FFFFFF; /* cards, panels, table rows */ --cd-surface-sunken:#FAF6EE; /* wells, table header, inputs bg */ --cd-surface-inverse:#252425;/* navbar, tooltips, inverse zones */ --cd-surface-hover:#F4EFE6; /* row / item hover */ --cd-text:#252425; --cd-text-muted:#6B655C; --cd-text-subtle:#8A8175; /* ⚠ --cd-text-inverse FLIPS: white in light, near-black in dark. It is only correct on a surface that flips the OPPOSITE way, i.e. one painted from --cd-text. Nothing in this app does that — every inverse surface here (--cd-surface-inverse, --cd-brand-fill, --cd-slate) is dark in BOTH themes, so this token renders near-black ink on a dark ground in dark mode. It had 14 call sites and all 14 were wrong; they now use the two pinned tokens below. Kept defined rather than deleted only because it is a public-ish custom property, but do not reach for it: pick the -on token that names the surface you are actually sitting on. */ --cd-text-inverse:#FFFFFF; --cd-text-on-brand:#FFFFFF; /* ink on --cd-brand-fill — pinned, never flips */ --cd-text-on-inverse:#FFFFFF; /* ink on --cd-surface-inverse / --cd-slate — same */ /* A SURFACE sitting on a brand fill — the inverted white pill on the maroon bar (KB "Submit a request", Edit, the editing badge, the focused header search field). Same value as --cd-text-on-brand and pinned for the same reason, but a distinct token because the role is distinct: an ink token should never appear in a `background-color`, and reading one there is how a reviewer loses the ability to tell a deliberate inversion from a mistake. Its own ink is --cd-brand-fill, so the pair is an exact inversion. */ --cd-surface-on-brand:#FFFFFF; --cd-brand:#9D2E34; /* text / links / borders / icons */ --cd-brand-hover:#7D2932; --cd-brand-active:#6E2224; --cd-brand-soft:#F2E1E1; /* subtle brand tint bg */ --cd-brand-fill:#9D2E34; /* SOLID fills white text sits on (navbar, primary btn) — stays deep in BOTH modes */ --cd-brand-fill-hover:#7D2932; --cd-link:#7D2932; --cd-link-hover:#CA3940; --cd-line:#E2DBCE; --cd-line-strong:#CFC6B4; --cd-focus:#CA3940; --cd-focus-ring:rgba(202,57,64,.35); /* ── KB admin surface (CD-2121) ────────────────────────────────────── The knowledge-base management module runs a cooler neutral scheme than the rest of the app: bone ground, white panels, grey hairlines. It is an ALIAS layer, not a second palette — every value below resolves to a Tier 1 primitive, so a brand change still reaches it. Why it is separate at all: the design was drawn against bone rather than --cd-surface, and snapping it to the warm ramp loses the crispness the screens were composed for. Scoped to the admin shell so the KB reader pages, which sit in the app's warm chrome, are untouched. */ --cd-kb-surface:var(--cd-bone); --cd-kb-surface-raised:var(--cd-white); --cd-kb-line:var(--cd-grey-200); --cd-kb-text:var(--cd-slate); --cd-kb-text-muted:var(--cd-grey-600); --cd-kb-badge:var(--cd-gold); --cd-kb-badge-ink:var(--cd-slate); /* ═══ SCALE TOKENS ═══ */ /* Type */ --cd-font-sans:"proxima-nova","Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; /* No --cd-font-serif: retired, see the webfont note at the top of this file. print.hbs keeps its own self-contained --pdf-serif (Georgia). */ --cd-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* ── Type scale ────────────────────────────────────────────────────── OPT-IN, NOT YET WIRED. These are deliberately not applied to h1-h6 (which take only color + family above): main.css and Bootstrap both set heading sizes today, so binding these to elements would restyle every heading in the app in one commit. Adopt per component during the main.css sweep, then wire the elements once nothing else sets a size. Lineage: derived from the APU type scale (Carnegie Web Style Guide + APU colors_and_type.css). H3/H4/H5/H6 keep APU's exact px values because they are already UI-viable; only the marketing-only top of the scale (APU display 89.5 / H1 60 / H2 38) is compressed for a dense agent workspace. See docs/design/BRAND_GUIDELINES.md. Sans-only. The serif was retired rather than given a role — see the webfont note at the top of this file. --cd-type-prose is the long-form reading role (16px sans), used for ticket bodies and KB articles. */ /* Sizes — rem against a 16px root; px noted for reference */ --cd-text-2xs:.6875rem; /* 11px · micro meta, timestamps */ --cd-text-xs:.75rem; /* 12px · eyebrow, badge, caption */ --cd-text-sm:.8125rem; /* 13px · secondary text, table meta */ --cd-text-base:.875rem; /* 14px · UI default (= APU H6/caption) */ --cd-text-md:1rem; /* 16px · long-form prose (ticket bodies, KB) */ --cd-text-lg:1.1875rem; /* 19px · = APU H5 */ --cd-text-xl:1.375rem; /* 22px · = APU H4 */ --cd-text-2xl:1.6875rem; /* 27px · = APU H3 */ --cd-text-3xl:2.125rem; /* 34px · compressed from APU H2 (38) */ --cd-text-4xl:2.625rem; /* 42px · compressed from APU H1 (60) */ /* Line height */ --cd-leading-tight:1.15; /* headings */ --cd-leading-snug:1.35; /* dense UI rows, controls */ --cd-leading-normal:1.5; /* body + prose (APU's own body ratio) */ /* Weight — APU: headings Bold 700, display/blockquote Black 900 */ --cd-weight-regular:400; --cd-weight-medium:500; --cd-weight-semibold:600; --cd-weight-bold:700; --cd-weight-black:900; /* Letter spacing */ --cd-tracking-tight:-.01em; /* large headings (APU H1) */ --cd-tracking-normal:0; --cd-tracking-wide:.1em; /* eyebrow */ --cd-tracking-caps:.14em; /* uppercase labels (APU H6 tracked = 14%) */ /* Role shorthands — `font:` shorthand, same idiom as APU's --type-*. Sets weight/size/line-height/family in one declaration; it does NOT carry text-transform or letter-spacing, so apply those separately (see --cd-type-eyebrow). */ --cd-type-h1:var(--cd-weight-bold) var(--cd-text-4xl)/var(--cd-leading-tight) var(--cd-font-sans); --cd-type-h2:var(--cd-weight-bold) var(--cd-text-3xl)/var(--cd-leading-tight) var(--cd-font-sans); --cd-type-h3:var(--cd-weight-bold) var(--cd-text-2xl)/var(--cd-leading-tight) var(--cd-font-sans); --cd-type-h4:var(--cd-weight-bold) var(--cd-text-xl)/var(--cd-leading-snug) var(--cd-font-sans); --cd-type-h5:var(--cd-weight-bold) var(--cd-text-lg)/var(--cd-leading-snug) var(--cd-font-sans); --cd-type-h6:var(--cd-weight-bold) var(--cd-text-base)/var(--cd-leading-snug) var(--cd-font-sans); --cd-type-body:var(--cd-weight-regular) var(--cd-text-base)/var(--cd-leading-snug) var(--cd-font-sans); --cd-type-prose:var(--cd-weight-regular) var(--cd-text-md)/var(--cd-leading-normal) var(--cd-font-sans); --cd-type-meta:var(--cd-weight-regular) var(--cd-text-sm)/var(--cd-leading-snug) var(--cd-font-sans); --cd-type-caption:var(--cd-weight-semibold) var(--cd-text-xs)/var(--cd-leading-snug) var(--cd-font-sans); --cd-type-eyebrow:var(--cd-weight-bold) var(--cd-text-xs)/var(--cd-leading-snug) var(--cd-font-sans); /* Buttons are Title Case here, NOT uppercase — deliberate divergence from APU's --type-button (14px tracked uppercase). See the UI copy capitalization convention in cougardesk-web/CLAUDE.md. */ --cd-type-button:var(--cd-weight-bold) var(--cd-text-base)/1 var(--cd-font-sans); /* Radius scale (fixes audit #5) */ --cd-radius-sm:6px; /* chips, inputs, small controls */ --cd-radius-md:10px; /* buttons, cards, dropdowns */ --cd-radius-lg:16px; /* modals, large panels */ --cd-radius-pill:999px;/* the single pill idiom */ /* Spacing (4px base) */ --cd-space-1:4px; --cd-space-2:8px; --cd-space-3:12px; --cd-space-4:16px; --cd-space-5:24px; --cd-space-6:32px; --cd-space-7:48px; --cd-space-8:64px; /* Elevation — warm-tinted, restrained */ --cd-shadow-sm:0 1px 2px rgba(58,42,30,.08); --cd-shadow-md:0 4px 12px rgba(58,42,30,.10); --cd-shadow-lg:0 12px 32px rgba(58,42,30,.16); /* Motion */ --cd-duration:.2s; --cd-easing:ease; --cd-transition:var(--cd-duration) var(--cd-easing); } /* ═══ DARK MODE · flips the SURFACE tier + status tints ONCE ═══ */ /* (Replaces ~500 lines of per-component overrides.) */ [data-theme="dark"] { --cd-surface:#1B1916; --cd-surface-raised:#242019; --cd-surface-sunken:#151310; --cd-surface-inverse:#242019; --cd-surface-hover:#2C271F; --cd-text:#ECE7DF; --cd-text-muted:#A79E90; --cd-text-subtle:#857D6F; /* --cd-text-inverse flipping here is exactly what made it unusable — see the warning beside its light declaration. */ --cd-text-inverse:#252425; /* Restated at the SAME value on purpose: the brand fill stays deep in dark, so its ink must not move. --cd-text-on-inverse is not repeated at all, which says the same thing a different way; both are pinned. */ --cd-text-on-brand:#FFFFFF; --cd-brand:#E07A7F; /* lightened brick — legible as TEXT/link on dark */ --cd-brand-hover:#EA9296; --cd-brand-active:#F0A6A9; --cd-brand-soft:rgba(178,58,64,.20); --cd-brand-fill:#B23A40; /* solid fill stays deep so white text clears AA */ --cd-brand-fill-hover:#CA3940; --cd-link:#E07A7F; --cd-link-hover:#EA9296; --cd-line:#38332B; --cd-line-strong:#4A4438; /* KB admin, dark. The cooler/warmer distinction is a LIGHT-mode idea — on a near-black ground it reads as noise — so these rejoin the app's dark surface tier rather than carrying a second dark ramp. The badge is the exception: gold stays gold, and its ink stays slate, because it is a flat brand accent rather than a surface. */ --cd-kb-surface:var(--cd-surface); --cd-kb-surface-raised:var(--cd-surface-raised); --cd-kb-line:var(--cd-line); --cd-kb-text:var(--cd-text); --cd-kb-text-muted:var(--cd-text-muted); --cd-focus:#E07A7F; --cd-focus-ring:rgba(224,122,127,.40); /* Status — light fg + translucent hue bg */ --cd-status-new-fg:#E0B25A; --cd-status-new-bg:rgba(192,138,45,.18); --cd-status-open-fg:#E88C90; --cd-status-open-bg:rgba(178,58,64,.22); --cd-status-pending-fg:#85B0D0; --cd-status-pending-bg:rgba(62,107,138,.22); --cd-status-on_hold-fg:#C3BBAD; --cd-status-on_hold-bg:rgba(255,255,255,.10); --cd-status-solved-fg:#ECE7DF; --cd-status-solved-bg:rgba(255,255,255,.16); --cd-status-closed-fg:#9A9284; --cd-status-closed-bg:rgba(255,255,255,.06); --cd-status-spam-fg:#CF8CA2; --cd-status-spam-bg:rgba(142,84,104,.22); --cd-status-merged-fg:#A79E90; --cd-status-merged-bg:rgba(255,255,255,.06); --cd-status-new-solid:#E8B23A; --cd-status-new-on:#3A2A05; --cd-status-open-solid:#C4474D; --cd-status-open-on:#FFFFFF; --cd-status-pending-solid:#4E7FA0; --cd-status-pending-on:#FFFFFF; --cd-status-on_hold-solid:#7A7468; --cd-status-on_hold-on:#FFFFFF; --cd-status-solved-solid:#4A443B; --cd-status-solved-on:#ECE7DF; --cd-status-closed-solid:#5A5349; --cd-status-closed-on:#ECE7DF; --cd-status-spam-solid:#9E5E74; --cd-status-spam-on:#FFFFFF; --cd-status-merged-solid:#5A5349; --cd-status-merged-on:#ECE7DF; --cd-success-fg:#7FC0A0; --cd-success-bg:rgba(63,122,94,.18); --cd-warning-fg:#E0B25A; --cd-warning-bg:rgba(192,138,45,.18); --cd-danger-fg:#E88C90; --cd-danger-bg:rgba(178,58,64,.20); --cd-info-fg:#85B0D0; --cd-info-bg:rgba(62,107,138,.20); --cd-info-bg-hover:rgba(62,107,138,.32); /* Amber depth steps. The two surfaces stay rgba() so they composite over whatever is behind them — an amber panel nested in an amber card deepens on its own, which is how the old two-tone comes back without a second value. --cd-warning-on is NOT redefined here: --cd-warning does not flip, so its ink must not either. */ --cd-warning-bg-hover:rgba(192,138,45,.30); --cd-warning-border:#5C4E1F; --cd-warning-fg-strong:#F0D88C; --cd-warning-ring:rgba(224,178,90,.40); --cd-shadow-sm:0 1px 2px rgba(0,0,0,.4); --cd-shadow-md:0 4px 12px rgba(0,0,0,.45); --cd-shadow-lg:0 12px 32px rgba(0,0,0,.55); } @media (prefers-reduced-motion: reduce){ :root{ --cd-duration:0s; } } /* ============================================================ MIGRATION MAP — existing CougarDesk classes → tokens Include AFTER Bootstrap + main.css to override incrementally. ⚠ IF YOU EDITED main.css AND NOTHING CHANGED, IT IS THIS BLOCK. Most selectors below are ALSO declared in main.css, and this file is linked second, so these values win. Change the value HERE, or in both places. Measured rather than assumed: 94 selector×property pairs are declared in both files, and 12 of them still hold DIFFERENT values — so the order of two tags decides 12 live declarations. It was 21 before the two bugs that measurement turned up: - main.css had `.btn-apu`'s resting and hover fills SWAPPED, so a hover lightened the button. It only ever looked right because this block overrode it. - this block was overriding a CORRECT main.css value on `.btn-outline-apu:hover`, forcing --cd-brand, which lightens to #E07A7F in dark and left white ink at 2.89:1. Invisible in light, where both tokens resolve to the same #9D2E34. Retiring this block is gap #2 in docs/design/BRAND_GUIDELINES.md and is the only thing that makes the order stop mattering. Deferred on purpose: relocating every declaration and settling the remaining 12 disagreements touches the whole app chrome, so it wants its own ticket and a screenshot baseline (`npm run screenshots:diff`). Meanwhile scripts/check-css-link-order.js asserts the order in every layout, so it can no longer change silently. ============================================================ */ body{ background-color:var(--cd-surface); color:var(--cd-text); font-family:var(--cd-font-sans); /* real brand face, Helvetica removed */ } h1,h2,h3,h4,h5,h6{ color:var(--cd-text); font-family:var(--cd-font-sans); } a{ color:var(--cd-link); } a:hover{ color:var(--cd-link-hover); } :focus-visible{ outline:2px solid var(--cd-focus); outline-offset:2px; } /* Buttons */ .btn-apu{ background-color:var(--cd-brand-fill); border-color:var(--cd-brand-fill); color:var(--cd-text-on-brand); border-radius:var(--cd-radius-pill); } .btn-apu:hover,.btn-apu:focus{ background-color:var(--cd-brand-fill-hover); border-color:var(--cd-brand-fill-hover); color:var(--cd-text-on-brand); } .btn-apu:active{ background-color:var(--cd-brand-active)!important; border-color:var(--cd-brand-active)!important; } .btn-outline-apu{ border-color:var(--cd-brand); color:var(--cd-brand); border-radius:var(--cd-radius-pill); } /* -fill, NOT --cd-brand. --cd-brand lightens to #E07A7F in dark, and white ink on that is 2.89:1 — a failure you cannot see in light mode, where both tokens resolve to the same #9D2E34 (7.31:1). --cd-brand-fill stays deep in both, so dark becomes #B23A40 at 5.88:1. main.css had this right and lost the cascade; see the load-order note at the top of this map. */ .btn-outline-apu:hover,.btn-outline-apu:focus{ background-color:var(--cd-brand-fill); color:var(--cd-text-on-brand); } /* Every button follows the single pill idiom (design standard); the brand buttons above already opt in — this covers the rest (outline-secondary, -warning, -danger, …). Bootstrap's own .btn-group first/last-child corner rules are more specific, so grouped buttons (segmented toggles, the submit split) still render as one connected pill. Icon-only .btn-square buttons round fully into a circle. */ .btn{ border-radius:var(--cd-radius-pill); } .btn-square{ border-radius:50%; } /* Cards & surfaces */ .card{ background-color:var(--cd-surface-raised); border-color:var(--cd-line); border-radius:var(--cd-radius-md); box-shadow:var(--cd-shadow-sm); } .card-header{ background-color:var(--cd-surface-sunken); border-bottom-color:var(--cd-line); color:var(--cd-text); } .card-footer{ background-color:var(--cd-surface-sunken); border-top-color:var(--cd-line); } /* Navbar */ .navbar-apu{ background-color:var(--cd-brand-fill); } /* Sidebar */ #sidebar{ background-color:var(--cd-surface-raised); border-right-color:var(--cd-line); } #sidebar .nav-link{ color:var(--cd-text-muted); border-radius:var(--cd-radius-sm); } #sidebar .nav-link:hover{ background-color:var(--cd-surface-hover); color:var(--cd-text); } #sidebar .nav-link.active{ background-color:var(--cd-brand-soft); color:var(--cd-brand); } /* Tables */ .table{ --bs-table-bg:var(--cd-surface-raised); color:var(--cd-text); --bs-table-color:var(--cd-text); } .table thead th{ background-color:var(--cd-surface-sunken); color:var(--cd-text-muted); border-bottom-color:var(--cd-line-strong); } .table tbody td{ border-bottom-color:var(--cd-line); } .table-hover tbody tr:hover td{ background-color:var(--cd-surface-hover); } /* Forms */ .form-control,.form-select{ background-color:var(--cd-surface-sunken); border-color:var(--cd-line-strong); color:var(--cd-text); border-radius:var(--cd-radius-sm); } .form-control:focus,.form-select:focus{ border-color:var(--cd-focus); box-shadow:0 0 0 3px var(--cd-focus-ring); } .form-control::placeholder{ color:var(--cd-text-subtle); } .form-label{ color:var(--cd-text); } /* Ticket status chips — .status-bg-{status} */ .status-bg-new{ background-color:var(--cd-status-new-solid); color:var(--cd-status-new-on); } .status-bg-open{ background-color:var(--cd-status-open-solid); color:var(--cd-status-open-on); } .status-bg-pending{ background-color:var(--cd-status-pending-solid); color:var(--cd-status-pending-on); } .status-bg-on_hold{ background-color:var(--cd-status-on_hold-solid); color:var(--cd-status-on_hold-on); } .status-bg-solved{ background-color:var(--cd-status-solved-solid); color:var(--cd-status-solved-on); } .status-bg-closed{ background-color:var(--cd-status-closed-solid); color:var(--cd-status-closed-on); } .status-bg-spam{ background-color:var(--cd-status-spam-solid); color:var(--cd-status-spam-on); } .status-bg-merged{ background-color:var(--cd-status-merged-solid); color:var(--cd-status-merged-on); } /* Status text — .status-color-{status} */ .status-color-new{ color:var(--cd-status-new-fg); } .status-color-open{ color:var(--cd-status-open-fg); } .status-color-pending{ color:var(--cd-status-pending-fg); } .status-color-on_hold{ color:var(--cd-status-on_hold-fg); } .status-color-solved{ color:var(--cd-status-solved-fg); } .status-color-closed{ color:var(--cd-status-closed-fg); } /* Feedback badges (retire raw Bootstrap hexes). .badge-warning was white-on-#C08A2D at ~3.1:1 — under AA for badge-sized text. It now takes --cd-warning-on like the amber status badges already did via --cd-status-new-on; the other three keep white, spelled as a token. */ .badge-success{ background-color:var(--cd-success); color:var(--cd-success-on); } .badge-warning{ background-color:var(--cd-warning); color:var(--cd-warning-on); } .badge-danger{ background-color:var(--cd-danger); color:var(--cd-danger-on); } .badge-info{ background-color:var(--cd-info); color:var(--cd-info-on); } /* --cd-brand lightens in dark; -fill is the solid that white is chosen against. */ .badge-primary{ background-color:var(--cd-brand-fill); color:var(--cd-text-on-brand); } /* Stat cards (left accent) */ .stat-card.stat-open,.stat-card.stat-card-red{ border-left-color:var(--cd-status-open-fg); } .stat-card.stat-new{ border-left-color:var(--cd-status-new-fg); } .stat-card.stat-card-blue{ border-left-color:var(--cd-status-pending-fg); } .stat-card.stat-on-hold,.stat-card.stat-card-amber{ border-left-color:var(--cd-warning); } .stat-card.stat-card-green{ border-left-color:var(--cd-success); } /* Alerts */ .alert{ border-radius:var(--cd-radius-md); border:1px solid transparent; } .alert-success{ background-color:var(--cd-success-bg); color:var(--cd-success-fg); border-color:var(--cd-success); } .alert-warning{ background-color:var(--cd-warning-bg); color:var(--cd-warning-fg); border-color:var(--cd-warning); } .alert-danger{ background-color:var(--cd-danger-bg); color:var(--cd-danger-fg); border-color:var(--cd-danger); } .alert-info{ background-color:var(--cd-info-bg); color:var(--cd-info-fg); border-color:var(--cd-info); }