/* ============================================================================ * The Bench Platform — Design Tokens * ============================================================================ * Single source of truth for all visual values in the app. Organized in 3 * strict tiers. Components reference ONLY Tier 2 (core roles) or Tier 3 * (scoped/derived) tokens — never Tier 1 primitives, never inline color-mix(). * * Tier 1 — Primitives: raw scale-based color values (`--color-green-100`, * `--color-orange-burnt-500`). Never role-named. * Referenced only by Tier 2 and Tier 3 — never by * components. A handful of legacy non-scale names * remain (`--color-navy-deep/-mid/-light`, * `--color-text-dark`) — future cleanup ticket. * Tier 2 — Core roles: the canonical semantic tokens. 15 brand/status/main * tokens — --primary, --surface, --surface-raised, * --surface-overlay, --text, --text-muted, * --text-inverse, --border, --success, --warning, * --danger, --info, --main-bg, --main-accent-1, * --main-accent-2. **Dark mode overrides ONLY Tier 2.** * Tier 3 adapts automatically via Tier 2 references. * Tier 3 — Scoped: specific-purpose tokens that compose off Tier 2. * --primary-hover, --highlight* (fill/shadow/border/ * glow + solid), --status-{name}-bg/-text, * --hero-bg/-raised/-border, field-state aliases, * etc. Most auto-adapt via color-mix() on Tier 2. * Narrow exception: --status-*-bg / --status-neutral- * text reference Tier 1 LIGHT primitives directly * (to match Joey's exact cream pairs), so they get * dark-block overrides. * Legacy aliases: ~80 older token names (--bg-card, --text-primary, * etc.) retained as Tier 3 aliases to avoid breaking * untouched components. Do NOT introduce new uses; * prefer Tier 2/Tier 3 canonical names. * * Light is the default (`:root`). Dark is opt-in via either class * `body.dark-mode` (ContextService, PM profile) or attribute * `[data-theme="dark"]` on (proto ThemeService). Both trigger the * same dark tokens. The dark block overrides the 12 theme-adaptive Tier 2 * tokens + --main-bg (navy in dark, cream in light per Joey) + the 5 * black-shadow depths + a handful of Tier 3 exceptions that reference Tier 1 * directly. --main-accent-1 and --main-accent-2 stay static (rose/peach). * * Full system: docs/development/design-tokens.md * Migration progress: docs/development/design-tokens-migration.md * ============================================================================ */ :root, [data-theme="light"] { /* ═══════════════════════════════════════════════════════════════════════ * TIER 1 — Primitives (raw hex — never referenced directly by components) * Grouped by palette. Dark primitives live here too so the dark block * below only has to rewire Tier 2 pointers, not redeclare hex. * * The [data-theme="light"] selector lets any subtree opt out of dark * mode by setting data-theme="light" on a wrapper element. Used for * brand-static surfaces like the public/auth flow (login, apply, * forgot, etc.) where the design intent is "always light regardless * of the user's global theme toggle". * ═══════════════════════════════════════════════════════════════════════ */ /* Navy family (nav / brand — static on both themes) */ --color-navy-500: #15224D; --color-navy-600: #1A2A5E; --color-navy-deep: #0E1A3D; /* dark surface */ --color-navy-mid: #182854; /* dark surface-raised */ --color-navy-light: #1E3268; /* dark surface-overlay */ /* Orange family */ --color-orange-500: #FC6804; /* dark --primary */ --color-orange-600: #E55D00; --color-orange-burnt-50: #FEF0EA; /* light --highlight-fill (Joey accent-light) */ --color-orange-burnt-500: #E85D26; /* light --primary (Joey burnt orange) */ --color-orange-burnt-600: #D04D1A; /* light --primary-hover (Joey accent-hover) */ /* Cream / warm grays (light surfaces & borders) */ --color-cream-50: #F7F4EF; --color-white: #FFFFFF; --color-warm-100: #EDE7DC; --color-warm-200: #EAE4DA; /* Warm grays (light text — warm stack, replaces cool grays) */ --color-gray-900: #1A1714; --color-gray-600: #78716C; --color-gray-400: #A8A29E; /* Cool grays (dark text) */ --color-text-dark: #F0F2F8; --color-text-muted-dark: #A0AECF; /* Status — light palette (Joey values on a Tailwind-like scale) * Backgrounds (-100) + text (-600/-700/-800/-900). The old --color-*-500 * names were renamed to match the scale accurately. */ --color-green-100: #DCFCE7; --color-green-900: #14532D; --color-amber-100: #FEF3C7; --color-amber-700: #B45309; --color-red-100: #FEE2E2; --color-red-600: #DC2626; --color-blue-100: #DBEAFE; --color-blue-700: #026A8E; /* brand teal (banner gradient stop) */ --color-blue-800: #1E40AF; /* Purple scale — new family (neutral status pair) */ --color-purple-100: #F3E8FF; --color-purple-400: #C084FC; /* dark-mode neutral text */ --color-purple-700: #7E22CE; /* light-mode neutral text */ /* Status — dark palette (lighter / more saturated for contrast on navy) */ --color-green-400: #4ADE80; --color-amber-400: #FBBF24; --color-red-400: #F87171; --color-blue-400: #60A5FA; /* Brown scale — dark warm surface (hero, opt-in) */ --color-brown-800: #241F18; --color-brown-900: #1C1814; /* Hero accent family (rose + peach — used by prominent dark headers) */ --color-rose-400: #E88CA5; --color-peach-400: #F4A261; /* ═══════════════════════════════════════════════════════════════════════ * TIER 2 — Semantic (components use ONLY these) * Light defaults. Dark block below rewires the pointers to the dark * palette; nothing else changes. * ═══════════════════════════════════════════════════════════════════════ */ /* Brand (9) */ --primary: var(--color-orange-burnt-500); --surface: var(--color-cream-50); --surface-raised: var(--color-white); --surface-overlay: var(--color-warm-100); --text: var(--color-gray-900); --text-muted: var(--color-gray-600); --text-light: var(--color-gray-400); --text-inverse: var(--color-white); --border: var(--color-warm-200); /* Status (4) */ --success: var(--color-green-900); --warning: var(--color-amber-700); --danger: var(--color-red-600); --info: var(--color-blue-800); /* Main (3) — prominent surfaces shared by chat-widget, PM/internal profile * hero, tbl-tags/segmented. --main-bg is theme-adaptive (cream in light per * Joey, navy in dark); accents stay rose/peach (still contrast well on navy * in dark, and as warm accents on cream in light). */ --main-bg: var(--surface); --main-accent-1: var(--color-rose-400); --main-accent-2: var(--color-peach-400); /* ═══════════════════════════════════════════════════════════════════════ * TIER 3 — Scoped / derived tokens * ═══════════════════════════════════════════════════════════════════════ * Specific-purpose tokens that compose off Tier 2 (mostly) or Tier 1 (for * the status bg pairs that must match exact cream shades). All consumed * only by components that need them — never the primary dependency. * * Most auto-adapt in dark because they reference Tier 2 tokens via * color-mix(). The narrow exceptions (--status-*-bg + --status-neutral-text) * reference Tier 1 LIGHT primitives directly, so the dark block below * overrides them. * ═══════════════════════════════════════════════════════════════════════ */ /* Primary variant — CTA hover (Joey hand-picked hex; dark block derives via color-mix) */ --primary-hover: var(--color-orange-burnt-600); /* Highlight family — 4 role-based buckets + bare solid. Role names * describe USE (fill / shadow / border / glow), not hue intensity. * --highlight-fill uses Joey's hand-picked tint (#FEF0EA); dark block * overrides to a color-mix derived from --primary. */ --highlight: var(--primary); --highlight-fill: var(--color-orange-burnt-50); --highlight-shadow: color-mix(in srgb, var(--primary) 20%, transparent); --highlight-border: color-mix(in srgb, var(--primary) 30%, transparent); --highlight-glow: color-mix(in srgb, var(--primary) 40%, transparent); /* Status bg/text pairs. Text side auto-adapts via --success / --warning / * --danger / --info. Bg side references a Tier 1 light primitive — dark * block overrides. Neutral is light-blue/navy in light mode; dark needs * a brighter blue against the navy surfaces. */ --status-success-bg: var(--color-green-100); --status-success-text: var(--success); --status-warning-bg: var(--color-amber-100); --status-warning-text: var(--warning); --status-error-bg: var(--color-red-100); --status-error-text: var(--danger); --status-info-bg: var(--color-blue-100); --status-info-text: var(--info); --status-neutral-bg: var(--color-blue-100); --status-neutral-text: var(--color-navy-500); /* Slice K67 (2026-05-06): chip-tint family — 50%-transparent variants * of the status-*-bg tokens. Used by the client-list CBU chips so the * pills don't pop out as much as full status-bg fills. Composes off * the Tier 2 status tokens, so the dark-theme override picks them up * automatically (see the dark block below). */ --chip-tint-success: color-mix(in srgb, var(--status-success-bg), transparent 50%); --chip-tint-info: color-mix(in srgb, var(--status-info-bg), transparent 50%); --chip-tint-warning: color-mix(in srgb, var(--status-warning-bg), transparent 50%); /* Hero scoped (dark warm surface embedded in light mode — static, opt-in). * --hero-border is 8% white (0x14 hex = 20/255 alpha ≈ 0.08 rgba), written * as an 8-digit hex per Joey's spec. */ --hero-bg: var(--color-brown-900); --hero-bg-raised: var(--color-brown-800); --hero-border: #FFFFFF14; /* K-Brown-1 (2026-05-14) — Carlos: deep brown is the new menu / * dark-mode base. `--menu-*` Tier 3 aliases compose off the hero * family so the menu chrome stays brown in BOTH themes (opt-in * dark, same pattern as hero). Dark mode's --surface* family * separately overrides to brown so the whole product reads warm- * dark rather than cold-charcoal. */ --menu-bg: var(--hero-bg); /* #1C1814 */ --menu-bg-raised: var(--hero-bg-raised); /* #241F18 */ --menu-border: var(--hero-border); /* #FFFFFF14 */ --menu-text: var(--color-cream-50); /* #F7F4EF warm off-white */ --menu-text-muted: color-mix(in srgb, var(--color-white) 60%, transparent); --menu-text-active: var(--primary); /* peach */ --menu-item-hover: color-mix(in srgb, var(--color-white) 10%, transparent); /* K-Brown-3 (2026-05-14) — Carlos: status-pill text colors need * proper light + dark variants. Hardcoded hex literals like * `color: #026A8E` failed contrast on the new brown dark surface. * These Tier 3 tokens carry the canonical pill hue per status with * the dark-mode block overriding to the brighter `--color-*-400` * family. Use these wherever status pills declare text color. */ --pill-info-text: var(--color-blue-700); /* #026A8E light */ --pill-info-bg: color-mix(in srgb, var(--color-blue-700) 12%, transparent); --pill-success-text: #22AF47; --pill-success-bg: color-mix(in srgb, #22AF47 12%, transparent); --pill-warning-text: #B8860B; --pill-warning-bg: color-mix(in srgb, #FBBF24 14%, transparent); --pill-danger-text: var(--color-red-600); /* #DC2626 light */ --pill-danger-bg: color-mix(in srgb, var(--color-red-600) 12%, transparent); --pill-purple-text: #7C3AED; --pill-purple-bg: color-mix(in srgb, #7C3AED 12%, transparent); --pill-muted-text: var(--text-muted); --pill-muted-bg: color-mix(in srgb, var(--text-muted) 12%, transparent); /* Banner gradient — shared brand chrome for applicant-facing profile banners * (PM applicant-review header, talent onboarding profile-look). Static in * both themes by design (same rationale as --main-bg / --hero-bg: brand * surfaces must stay navy→teal regardless of theme). Use --text-inverse for * text on top. */ --banner-gradient: linear-gradient(90deg, var(--color-navy-500) 26%, var(--color-blue-700) 100%); /* Lance banner scoped — Pass II Issue B. Theme-flipping (warm peach in * light, dark navy in dark) so the Lance review hero matches Joey's mock * instead of staying static-dark like --hero-* family. */ --bg-lance-banner: color-mix(in srgb, var(--color-peach-400) 22%, var(--surface)); --bg-lance-banner-raised: color-mix(in srgb, var(--color-peach-400) 32%, var(--surface)); --text-lance-banner: var(--primary); --border-lance-banner: color-mix(in srgb, var(--color-peach-400) 45%, transparent); /* Canonical Lance marker (Brief B — AI iconography normalization). * `.lance-marker` only — Lance brand surfaces (banners, hero CTAs) * use the orange peach palette via `--bg-lance-banner-*`. */ --lance-marker-color: var(--color-blue-800); /* ═══════════════════════════════════════════════════════════════════════ * Non-color tokens (theme-agnostic) * ═══════════════════════════════════════════════════════════════════════ */ /* Typography */ /* K81d (2026-05-12) — Carlos: legacy `--font-sans` (Montserrat) + * `--font-serif` (Cormorant Garamond) repointed at the canonical * tokens. After the K79o Montserrat CDN sweep, Montserrat was never * actually loaded — consumers of `--font-sans` got a system fallback * which looked off vs the canonical Outfit body. Aliasing both to * the canonical tokens lets any straggler consumer render correctly * without a per-file sweep. */ --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Playfair Display', Georgia, serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Proto v7 §A3 (2026-05-07): Outfit body + Playfair Display titles + Playfair italic for Lance copy. */ --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-title: 'Playfair Display', Georgia, serif; --font-lance: 'Playfair Display', Georgia, serif; /* paired with `font-style: italic` at the consumer */ --font-2xs: 0.5rem; --font-xs: 0.625rem; --font-sm: 0.6875rem; --font-md: 0.75rem; --font-base: 0.8125rem; --font-lg: 1rem; --font-xl: 1.25rem; --font-2xl: 1.5rem; --font-metric: 1.75rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --tracking-tight: 0.2px; --tracking-normal: 0.4px; --tracking-wide: 0.5px; --tracking-caps: 0.63px; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; /* Spacing */ --space-0: 0; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Border radius — 3 size tokens + full (circular). Use var(--radius-{sm,md,lg}) * for squared elements, var(--radius-full) for pill/circle shapes. Never * hardcode px for border-radius. */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 100px; /* Legacy radius aliases — do not use in new code */ --radius-xs: var(--radius-sm); --radius-xl: var(--radius-lg); /* Shadows — light-mode defaults use a warm rgba scale (Joey). The dark * block below overrides the 5 black-shadow depths (stronger black opacity * on navy surfaces). --shadow-focus derives from --primary via color-mix, * so it auto-adapts. */ --shadow-none: none; --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.05), 0 2px 6px rgba(28, 25, 23, 0.04); --shadow-md: 0 3px 18px rgba(28, 25, 23, 0.08), 0 1px 4px rgba(28, 25, 23, 0.04); --shadow-card: 0 3px 18px rgba(28, 25, 23, 0.08), 0 1px 4px rgba(28, 25, 23, 0.04); --shadow-lg: 0 8px 40px rgba(28, 25, 23, 0.13), 0 2px 8px rgba(28, 25, 23, 0.06); --shadow-elevated: 0 8px 40px rgba(28, 25, 23, 0.13), 0 2px 8px rgba(28, 25, 23, 0.06); --shadow-focus: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); /* Control heights */ --h-xs: 24px; --h-sm: 32px; --h-md: 40px; --h-lg: 48px; /* Icon sizes */ --ic-sm: 14px; --ic-md: 16px; --ic-lg: 20px; --ic-xl: 24px; /* Containers */ --container-narrow: 720px; --container-default: 1200px; --container-wide: 1440px; /* Transitions */ --duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 300ms; --ease-default: ease-out; /* Z-Index scale */ --z-base: 0; --z-card: 1; --z-sticky: 10; --z-dropdown: 10; --z-overlay: 50; --z-drawer: 100; --z-modal: 100; --z-toast: 200; --z-tooltip: 300; /* Nav (STATIC — always deep brown in both themes per Carlos R2 * lock 2026-05-14. The main navbar is the one consistent brand * chrome users see everywhere; brown matches the editorial * vocabulary the rest of the proto is moving toward (hero, public * profile, Lance banner dark). Previously navy `--color-navy-500`; * flipped to point at the new `--menu-*` Tier 3 family so any * future menu/dark-mode polish flows from one source. */ --nav-bg: var(--menu-bg); --nav-text: var(--menu-text); --nav-blur: 0; --nav-border: var(--menu-border); --nav-item-hover: var(--menu-item-hover); /* Avatar identity palette (STATIC — same hues in light + dark). Identity * colors stay visually distinct from theme colors so a user's avatar reads * as that user, not as a primary/accent surface. Indexed by hash of user * identity (today: userId % palette length). See DISCOVERED_ISSUES.md — * "Avatar identity palette as static Tier-3 tokens (should be hash-derived)" * for the proper long-term replacement. */ --avatar-fill-1: #6366f1; --avatar-fill-2: #8b5cf6; --avatar-fill-3: #ec4899; --avatar-fill-4: #f59e0b; --avatar-fill-5: #10b981; --avatar-fill-6: #3b82f6; --avatar-fill-7: #ef4444; --avatar-fill-8: #14b8a6; --avatar-fill-9: #f97316; --avatar-fill-10: #06b6d4; /* CBU (Reference Client) identity palette — STATIC, same hues both themes. * Selected by rc-image-color pipe via cbu.cbuId. Color names match the * legacy `.cbu-image.{color}` CSS modifiers. See DISCOVERED_ISSUES.md — * same hash-derived-utility concern as --avatar-fill-N. */ --cbu-fill-light-red: #FF5757; --cbu-fill-violet: #8C52FF; --cbu-fill-blue: #5271FF; --cbu-fill-orange: #F78D45; --cbu-fill-yellow: #F7CF1D; --cbu-fill-green: #8DAAA0; --cbu-fill-light-blue: #1AAEE7; --cbu-fill-pink: #C499B8; --cbu-fill-brown: #DAB894; /* Foreground for letters laid over the static CBU palette. Must stay * static-light: --text-inverse flips dark in dark mode and would yield * dark-on-bright (illegible) over the saturated CBU bg hues. */ --cbu-fg: #ffffff; /* ═══════════════════════════════════════════════════════════════════════ * LEGACY ALIASES — do NOT use in new code * ═══════════════════════════════════════════════════════════════════════ * All aliases live here (not in the dark block). Tints use color-mix() * on Tier 2 tokens so they adapt automatically when the theme flips. * The only alias that needs a dark override is --text-heading (below). * ══════════════════════════════════════════════════════════════════════ */ /* Brand button / focus aliases → follow --primary (role-based, kept). * The old --accent / --accent-orange-* family was removed in TBL2-905 — * consumers migrated to the Tier 3 --highlight-* family defined above. */ --main-button-color: var(--primary); --secondary-button-color: var(--text-muted); --border-focus: color-mix(in srgb, var(--primary) 40%, transparent); /* Brand navy aliases (STATIC — always navy on both themes) */ --brand-navy: var(--color-navy-500); --brand-red: #FF2D00; --navy: var(--color-navy-500); --bg-navy: var(--color-navy-500); --proto-navy: var(--color-navy-500); --proto-danger: var(--danger); --proto-muted: var(--text-muted); /* Surface aliases → --surface / --surface-raised / --surface-overlay */ --bg-base: var(--surface); --bg-card: var(--surface-raised); --bg-card-alt: var(--surface-overlay); --bg-card-50: color-mix(in srgb, var(--surface-raised) 50%, transparent); --bg-elevated: var(--surface-raised); --bg-elevated-50: color-mix(in srgb, var(--surface-overlay) 50%, transparent); --bg-elevated-alt: var(--surface-overlay); --bg-elevated-light: var(--surface-overlay); --bg-inset: var(--surface-overlay); --bg-interactive: var(--surface-overlay); --surface-muted: var(--surface-overlay); --color-background-1: var(--surface); --color-background-3: var(--surface-overlay); --color-background-6: var(--surface-raised); --color-background-input: var(--surface-raised); --color-card-header: var(--surface-overlay); --subtle-bg-overlay: color-mix(in srgb, var(--surface) 40%, transparent); --slate-subtle: color-mix(in srgb, var(--text) 5%, transparent); --sys-icon-bg: color-mix(in srgb, var(--text) 8%, transparent); /* Text aliases */ --text-primary: var(--text); --text-secondary: var(--text-muted); --text-heading: var(--text); --color-font-2: var(--text); --color-font-6: var(--text-muted); --color-font-7: var(--text-muted); --color-font-9: var(--text-muted); --color-font-12: var(--text-muted); --color-font-15: var(--text-muted); --co2or-font-2: var(--text); /* legacy typo, keep alias to not break */ --color-input-text: var(--text); --color-input-label: var(--text-muted); /* Border aliases */ --border-default: var(--border); --border-default-30: color-mix(in srgb, var(--border) 30%, transparent); --border-default-40: color-mix(in srgb, var(--border) 40%, transparent); --border-default-50: color-mix(in srgb, var(--border) 50%, transparent); --border-subtle: var(--surface-overlay); --border-row: color-mix(in srgb, var(--border) 50%, transparent); /* Status aliases → tints of --success / --warning / --danger / --info */ --status-green: var(--success); --status-green-tint: color-mix(in srgb, var(--success) 10%, transparent); --status-green-subtle: color-mix(in srgb, var(--success) 5%, transparent); --status-green-border: color-mix(in srgb, var(--success) 20%, transparent); --status-green-bg: color-mix(in srgb, var(--success) 10%, transparent); --status-green-15: color-mix(in srgb, var(--success) 13%, transparent); --status-green-highlight: color-mix(in srgb, var(--success) 7%, transparent); --sage-green: #059669; --sage-green-tint: color-mix(in srgb, #059669 10%, transparent); --status-amber: var(--warning); --status-amber-tint: color-mix(in srgb, var(--warning) 10%, transparent); --status-amber-subtle: color-mix(in srgb, var(--warning) 5%, transparent); --status-amber-border: color-mix(in srgb, var(--warning) 20%, transparent); --status-amber-bg: color-mix(in srgb, var(--warning) 10%, transparent); --status-red: var(--danger); --status-red-tint: color-mix(in srgb, var(--danger) 10%, transparent); --status-red-subtle: color-mix(in srgb, var(--danger) 5%, transparent); --status-red-border: color-mix(in srgb, var(--danger) 20%, transparent); --status-red-bg: color-mix(in srgb, var(--danger) 10%, transparent); --status-blue: var(--info); --status-blue-tint: color-mix(in srgb, var(--info) 10%, transparent); --status-blue-border: color-mix(in srgb, var(--info) 20%, transparent); --status-purple: #7C3AED; --status-purple-tint: color-mix(in srgb, #7C3AED 10%, transparent); --text-success: var(--success); --text-warning: var(--warning); /* Overlay / hover aliases — theme-adaptive tints of --text (black in * light, white in dark since --text is near-white in dark) */ --white-05: color-mix(in srgb, var(--text) 4%, transparent); --hover-overlay-subtle: color-mix(in srgb, var(--text) 4%, transparent); --hover-overlay-light: color-mix(in srgb, var(--text) 6%, transparent); /* Field state aliases */ --field-confirmed-bg: transparent; --field-confirmed-border: var(--border); --field-lance-bg: var(--highlight-fill); --field-lance-border: var(--primary); --field-lance-border-width: 3px; --field-gap-required-bg: var(--status-red-tint); --field-gap-required-border: var(--danger); --field-gap-optional-bg: var(--status-amber-tint); --field-gap-optional-border: var(--warning); --field-empty-bg: transparent; --field-empty-border: var(--border); /* Semantic border shortcuts */ --border-hairline: 1px solid color-mix(in srgb, var(--primary) 8%, transparent); --border-warm: 1px solid var(--border); --border-strong: 1px solid var(--primary); } /* ══════════════════════════════════════════════════════════════════════════ * DARK theme * Triggered by ContextService (body.dark-mode) or proto ThemeService * ([data-theme="dark"] on ) — both apply the same dark tokens. * * Only rewires Tier 2 pointers + the 5 black-shadow depths + --text-heading. * Every legacy alias adapts automatically because it color-mix()es on Tier 2. * ═════════════════════════════════════════════════════════════════════════ */ body.dark-mode, [data-theme="dark"] { /* K-Brown-1 (2026-05-14) — Carlos R2 lock: dark mode swaps from * navy/charcoal to the deep-brown family. `--color-brown-900` / * `-800` (already used by hero + Lance banner overrides) now own * the entire Tier 2 surface stack so the whole product reads as * warm-dark. Text + muted use warm off-white / 60% white so they * read on brown the same way the hero already proves. Legacy * `--color-navy-deep / -mid / -light` and `--color-text-dark / * -muted-dark` no longer referenced here. */ /* Tier 2 overrides — all reference dark Tier 1 primitives */ --primary: var(--color-orange-500); --surface: var(--color-brown-900); --surface-raised: var(--color-brown-800); --surface-overlay: color-mix(in srgb, var(--color-brown-800) 85%, var(--color-white)); --text: var(--color-cream-50); --text-muted: color-mix(in srgb, var(--color-white) 60%, transparent); --text-inverse: var(--color-white); --border: color-mix(in srgb, var(--color-white) 10%, transparent); --success: var(--color-green-400); --warning: var(--color-amber-400); --danger: var(--color-red-400); --info: var(--color-blue-400); /* Black-shadow depths — stronger opacities on dark surfaces. * --shadow-focus auto-adapts via color-mix on --primary, no override needed. */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-elevated: 0 10px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.30); /* Heading signature: white in dark (rest of aliases auto-adapt) */ --text-heading: var(--color-white); /* Tier 3 exceptions — status bg pairs + neutral text reference Tier 1 LIGHT * primitives directly (to match Joey's exact cream shades in light), so * they need dark-mode overrides to stay legible on navy surfaces. */ --status-success-bg: color-mix(in srgb, var(--success) 15%, transparent); --status-warning-bg: color-mix(in srgb, var(--warning) 15%, transparent); --status-error-bg: color-mix(in srgb, var(--danger) 15%, transparent); --status-info-bg: color-mix(in srgb, var(--info) 15%, transparent); --status-neutral-bg: color-mix(in srgb, var(--color-blue-400) 15%, transparent); --status-neutral-text: var(--color-blue-400); /* --text-light: in light is warm gray-400; dark uses a softer transparent * version of --text-muted so placeholders/disabled stay legible on navy. */ --text-light: color-mix(in srgb, var(--text-muted) 70%, transparent); /* --main-bg: light flipped to --surface (cream); dark keeps navy-500 for * chat-widget / internal-profile / PM-profile-hero / tbl-tags chrome. */ --main-bg: var(--color-navy-500); /* --primary-hover / --highlight-fill in light use Joey's hand-picked hex * primitives (orange-burnt-600 / -50). Those are wrong for the dark --primary * (#FC6804), so dark derives via color-mix on the actual dark --primary. */ --primary-hover: color-mix(in srgb, var(--primary) 85%, black); --highlight-fill: color-mix(in srgb, var(--primary) 10%, transparent); /* Lance banner dark overrides — Pass II Issue B. Matches the original * static-dark --hero-* look but as a flip-with-theme contract. */ --bg-lance-banner: var(--color-brown-900); --bg-lance-banner-raised: var(--color-brown-800); --text-lance-banner: var(--text); --border-lance-banner: color-mix(in srgb, var(--color-white) 8%, transparent); /* Canonical Lance marker — dark theme (Brief B). Lighter blue keeps * 11px circle legible against dark surfaces. */ --lance-marker-color: var(--color-blue-400); /* K-Brown-3 (2026-05-14) — Carlos: status-pill text colors brighten * in dark mode so they read on the brown surface. Light values like * #026A8E and #DC2626 lose contrast on #1C1814; the dark `*-400` * primitives are the canonical lift. Backgrounds also brighten * slightly (mix to ~18% instead of 12%) to keep the tint readable. */ --pill-info-text: var(--color-blue-400); --pill-info-bg: color-mix(in srgb, var(--color-blue-400) 18%, transparent); --pill-success-text: var(--color-green-400); --pill-success-bg: color-mix(in srgb, var(--color-green-400) 18%, transparent); --pill-warning-text: var(--color-amber-400); --pill-warning-bg: color-mix(in srgb, var(--color-amber-400) 18%, transparent); --pill-danger-text: var(--color-red-400); --pill-danger-bg: color-mix(in srgb, var(--color-red-400) 20%, transparent); --pill-purple-text: var(--color-purple-400); --pill-purple-bg: color-mix(in srgb, var(--color-purple-400) 20%, transparent); } /* ══════════════════════════════════════════════════════════════════════════ * Talent theme (warm off-white, used by the talent portal) * Rewires Tier 2 to a warmer palette; legacy aliases follow automatically. * ═════════════════════════════════════════════════════════════════════════ */ .theme-talent { --surface: #F8F6F2; --surface-raised: var(--color-white); --surface-overlay: #F0EDE8; --text: #1A1A2E; --text-muted: #6B7280; --border: #E4E0DA; --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-elevated: 0 4px 25px rgba(0, 0, 0, 0.10); } /* K-Brown-3 (2026-05-14) — Carlos: `.theme-talent` was authored as a * light-only warm-cream override (talent-invoicing-shell host class). * In dark mode those literals (#F8F6F2 cream + #1A1A2E dark navy * text) override the Tier 2 dark block, so the Talent Billing * surface renders as cream-on-cream chrome with dark navy text on * brown body → ~3:1 fail / invisible title + KPI values. Reset the * overrides to the canonical brown dark palette so the warm-dark * lock applies cleanly. */ body.dark-mode .theme-talent, [data-theme="dark"] .theme-talent, body.dark-mode.theme-talent, [data-theme="dark"].theme-talent { --surface: var(--color-brown-900); --surface-raised: var(--color-brown-800); --surface-overlay: color-mix(in srgb, var(--color-brown-800) 85%, var(--color-white)); --text: var(--color-cream-50); --text-muted: color-mix(in srgb, var(--color-white) 60%, transparent); --border: color-mix(in srgb, var(--color-white) 10%, transparent); } /* ══════════════════════════════════════════════════════════════════════════ * Heading / nav signature rules * ═════════════════════════════════════════════════════════════════════════ */ [data-theme] h1, [data-theme] h2, [data-theme] h3, [data-theme] .section-header, [data-theme] .section-divider__title, [data-theme] .sidebar-title, [data-theme] .ins-heading, [data-theme] .ins-section-title { color: var(--text-heading); } [data-theme] .ins-nav__title, [data-theme] .pd-nav__item, [data-theme] .ah-nav__item, [data-theme] .billing-nav__item, [data-theme] .pl-nav__item, [data-theme] .td__nav-btn, [data-theme] .tp-nav__item, [data-theme] .find-work__nav-link { color: var(--nav-text, #F7F4EF); } /* Smooth transitions on theme toggle (AG Grid excluded) */ [data-theme] * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } [data-theme] .ag-root *, [data-theme] .ag-body-viewport *, [data-theme] .ag-center-cols-viewport * { transition: none; } /* ══════════════════════════════════════════════════════════════════════════ * Lance Progressive Animation * ═════════════════════════════════════════════════════════════════════════ */ @keyframes lanceFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .lance-progressive > * { opacity: 0; animation: lanceFadeIn 300ms ease forwards; } .lance-progressive > *:nth-child(1) { animation-delay: 0ms; } .lance-progressive > *:nth-child(2) { animation-delay: 80ms; } .lance-progressive > *:nth-child(3) { animation-delay: 160ms; } .lance-progressive > *:nth-child(4) { animation-delay: 240ms; } .lance-progressive > *:nth-child(5) { animation-delay: 320ms; } .lance-progressive > *:nth-child(6) { animation-delay: 400ms; } .lance-progressive > *:nth-child(7) { animation-delay: 480ms; } .lance-progressive > *:nth-child(8) { animation-delay: 560ms; } @media (prefers-reduced-motion: reduce) { .lance-progressive > * { opacity: 1; animation: none; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════════════════════════════════ * Focus treatment (global) — uses tier 2 primary * ═════════════════════════════════════════════════════════════════════════ */ *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } body.dark-mode *:focus-visible, [data-theme="dark"] *:focus-visible { outline-color: var(--info); } /* ══════════════════════════════════════════════════════════════════════════ * Form controls — transparent by default * Text-like inputs, selects, and textareas inherit the surface they sit * on; only explicit :disabled / [readonly] states paint a solid * background. Don't reintroduce backgrounds on :focus or :hover in * component styles. * * Non-text input types (submit / reset / button / image / file / checkbox * / radio / range / color / hidden) keep their native / framework * rendering — the rule does not target them. If a new text-like HTML * input type ships, add it to the :is() list. * ═════════════════════════════════════════════════════════════════════════ */ input:is( [type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"] ):not(:disabled):not([readonly]), input:not([type]):not(:disabled):not([readonly]), select:not(:disabled):not([readonly]), textarea:not(:disabled):not([readonly]) { background: transparent; } /* Native