/* ============================================================================
   DESIGN TOKENS — semantic color layer (dark-theme Phase 0 foundation)
   :root holds the light-mode values. Each one matches the color already
   rendered today (site.css / Style.css literals) so introducing this file
   is a visual no-op: nothing consumes these in light mode yet (that starts
   in Phase 4's de-hardcoding sweep). html[data-theme="dark"] supplies the
   approved dark palette for the same names. dark-theme.css and every later
   token consumer read only these variables — never a literal.
   ========================================================================== */

:root {
    /* surfaces: page canvas -> card/raised -> input/inset -> hover/active */
    --surface: #e5e7eb;         /* site.css body background-color */
    --surface-raised: #ffffff;  /* .card, .card-header, .modal-content */
    --surface-inset: #fefefe;   /* site.css .form-control background rgb(254,254,254) */
    --surface-hover: #f8f9fa;   /* site.css hover/active surface */

    /* borders */
    --border: #dee2e6;          /* site.css default border */
    --border-strong: #ced4da;   /* site.css input border rgb(206,212,218) */

    /* text tiers: body / secondary / faint labels only */
    --text: #212529;            /* bootstrap body text */
    --text-secondary: #60686f;  /* bootstrap muted/secondary text */
    --text-faint: #adb5bd;      /* faint labels/placeholders */

    /* brand accent (site.css --branding) */
    --accent: #F39200;
    --accent-bg: rgba(243, 146, 0, 0.1);
    --accent-bd: rgba(243, 146, 0, 0.3);

    /* status: chip/badge colors already used in site.css */
    --status-success: #28a745;
    --status-error: #dc3545;
    --status-warning: #ffc107;
    --status-info: #17a2b8;    /* was #0dcaf0 (unconfirmed Bootstrap default) -- corrected to the
                                   real site.css literal (line 238) found during Phase 4 */

    /* Phase 4: --sn-* legacy variable set (site.css), migrated onto the token layer */
    --surface-subtle: #f9fafb;   /* site.css --sn-secondary-border-color */
    --border-soft: #f0f0f0;      /* site.css --sn-border-color */
    --text-strong: #333333;      /* site.css --sn-text-color */
    --cta-bg: #ff8d00;           /* site.css --sn-btn-background-color / --sn-btn-primary-background-color */
    --cta-bg-hover: #ff991c;     /* site.css --sn-btn-hover-background / --sn-btn-primary-hover-background */
    --btn-dark-bg: #343a40;      /* site.css --sn-btn-dark-background-color */
    --btn-dark-bg-hover: #23272b;/* site.css --sn-btn-dark-hover-background */
    --surface-disabled: #9aa4b2; /* site.css disabled e-btn background/border */
    --text-on-disabled: #f5f7fa; /* site.css disabled e-btn text */

    /* fixed contrast text that never flips with theme (sits on its own colored surface,
       e.g. white text on a solid-orange CTA button or a status-colored badge) */
    --text-on-accent: #ffffff;

    /* low-emphasis tinted status backgrounds (site.css .sn-low-*-bg chips) */
    --status-success-bg: #d4edda;
    --status-warning-bg: #fff3cd;
    --status-error-bg: #f8d7da;
    --status-info-bg: #cce5ff;
    --surface-muted: #f1f1f1;

    /* misc single/low-use literals (site.css customer-portal / upload-zone blocks) */
    --text-muted-alt: #696969;
    --border-dashed: #cccccc;
    --text-icon-muted: #666666;
    --surface-deep: #031022; /* intentionally-dark upload-zone bg, unchanged by theme */
    --text-grey: #808080;         /* site.css .sn-assessment-muted */
    --text-heading: #343a40;      /* site.css .sn-text-dark (bootstrap gray-800) */
    --border-faint: #e9e9e9;      /* site.css .navigation-drawer section border */
    --alert-accent: #ff7f00;      /* site.css .profile-info .alert-info / profile img border */
    --text-emphasis: #000000;     /* site.css active nav-link text */
    --surface-faint: #f8f8f8;     /* site.css .e-acrdn-header background */
    --border-light: #dfdfdf;      /* site.css .price-list border */
    --border-medium: #dadada;     /* site.css .top input border */
    --surface-active: #e9ecef;    /* site.css .sn-tabs toolbar / dropdown active-hover bg */
    --text-tab: #495057;          /* site.css .sn-tabs tab-text color */
    --overlay-scrim: #fffc;       /* site.css #sn-spinner backdrop */
    --loader-accent: #ff8600;     /* site.css .e-spin-bootstrap fill/stroke */
    --job-active-bg: #f3920052;   /* site.css .job-card.sn-active (accent @ ~32%) */
    --scrollbar-thumb: #888888;   /* site.css ::-webkit-scrollbar-thumb */
    --carousel-active-border: #007bff; /* site.css .sn-carousel .active-thumb */

    /* Phase 5 (P5.5): elevation system -- shadow-only card separation doesn't read on a dark
       surface, so raised elements pair a lighter background (--surface-raised) with a shadow
       tuned per theme rather than a fixed literal. Light values match the shadows already in
       use; dark values raise the opacity since a low-alpha black shadow is invisible against
       an already-dark page background. */
    --shadow-soft: 0 2px 10px rgba(15, 23, 42, 0.04);
    --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.06);

    /* Phase 5 (P5.1/P5.4): Tailwind-slate literals used by PortalTile/PortalTileGrid/
       ConversationTimeline -- a different grey family than the rest of the app's
       Bootstrap-derived tokens, kept distinct rather than approximated onto --border/
       --text-secondary. */
    --border-card: #e2e8f0;
    --text-muted-slate: #617086;

    /* Phase 5 (P5.4): App.razor's #blazor-error-ui banner -- Bootstrap alert-warning palette,
       not covered anywhere in dark-theme.css today */
    --status-warning-text: #664d03;
    --status-warning-border: #ffe69c;

    /* Phase 6: AuctionCarsPageFormNew.razor's inline-styled wrapper around Fetch Car Details/
       Car Condition & Pickup/Prices And Status -- root cause of the Phase 5 live-verification
       "white sections" finding (findings-todo.md, 2026-08-11) */
    --surface-cream: #fcf8f4;

    /* Phase 6: AuctionJobsListDialog.razor's .job-card chip */
    --surface-job-card: #eaeaea;
    --border-job-card: #7c8a7c;

    /* Phase 6: CarInquiryDetails.razor's zebra-striped row inline styles -- CSS keyword colors
       (darkgray/lightgray) invisible to the hex-only grep used through Phase 4/5 */
    --surface-zebra-dark: darkgray;
    --surface-zebra-light: lightgray;

    /* Phase 6: GetPriceDialog.razor -- its own emerald "accent" distinct from the app's orange
       --accent (mirrors ConversationTimeline's blue --conv-brand pattern from Phase 5), plus its
       one background use of the Tailwind slate-800 text shade (--nb-slate-800 is documented for
       text-color use only -- its dark remap to var(--text) would be wrong for a background). */
    --price-dialog-accent: #059669;
    --price-dialog-accent-bg: #ecfdf5;
    --price-dialog-active-fill: #1e293b;
    --price-dialog-error: #dc2626;
    --price-dialog-warning-icon: #f59e0b;

    /* Gap-remediation M item (2026-08-20): --price-dialog-active-fill was reused across the
       ScrapYield pages as generic heading/value/label text color, purely because slate-800 was a
       convenient dark shade -- not because that text represents an active/selected state. Since
       this token intentionally flips to the emerald accent in dark mode (see the dark :root
       block), every one of those unrelated text usages would have turned bright green in dark
       mode. Already caused one real bug this way (see the Phase 7 comment above on
       --sy-navy-*). --sy-text-strong is the split-out token for that generic-text usage: same
       light-mode value (a visual no-op), but flips to normal near-white text in dark mode like
       any other strong text, instead of the accent color. --price-dialog-active-fill itself stays
       reserved for genuine active/selected-state indicators (toggle fills, active tab/button
       text, selected-row highlights) where flipping to the accent color in dark mode is the
       whole point. */
    --sy-text-strong: #1e293b;

    /* Phase 7 follow-up (2026-08-12): ScrapYieldSettingPage.razor's "How Max Purchase Price"
       info card and "Live Exchange Rates" board are deliberately a fixed dark-navy card in BOTH
       themes (the light-theme look is the one the user wants kept in dark mode too). They must
       stay invariant rather than reuse tokens that correctly flip per-theme for their other
       consumers (--price-dialog-active-fill/--nb-text-strong flip to GetPriceDialog.razor's
       green "active toggle" state and near-white navbar text; --conv-surface-muted/--nb-text-faint
       flip to dark surfaces meant for ConversationTimeline's light-card text) -- reusing those
       here turned the navy card green with unreadable text once dark mode redefined them. */
    --sy-navy-bg-top: #0f172a;
    --sy-navy-bg-bottom: #1e293b;
    --sy-navy-title: #f8fafc;
    --sy-navy-muted: #94a3b8;
    --sy-navy-border: #e2e8f0;

    /* Phase 6: PricingSystem/InquirySystem/UpdatePricingSystem.razor.css's own small local
       :root palette (--sn-border/--sn-shadow-color/--sn-backgroud-color, distinct from site.css's
       Phase-4-aliased --sn-* set of the same naming convention) */
    --sn-tree-border: #ccc;
    --accent-bg-strong: #f392003b;
    --conversation-dialog-hover-bg: #e9e9e9;
    --sn-shadow-light: #cdcdcd;

    /* invariant "always dark" chrome (site.css --dark / --bg-dark), same both themes */
    --chrome-dark: #1f2531;
    --chrome-darker: #17161a;

    /* Phase 4 (P4.2): Style.css one-off utility badge colors -- arbitrary fixed colors,
       not part of the semantic surface/text/accent/status system, so kept invariant
       across themes rather than redesigned. */
    --util-blue: #2196F3;
    --util-purple-1: #845cb8;
    --util-purple-2: #8963bb;
    --util-black: #444444;
    --border-ddd: #dddddd;
    --shadow-neutral: #919191;
    --util-green: #4CAF50;
    --util-yellow: #fff400;
    --util-red: #ff0018;
    --util-grey-c8: #c8c8c8;

    /* Phase 4 (P4.2): css/app.css -- default Blazor-template scaffolding colors, invariant */
    --link-color: #0366d6;
    --btn-template-bg: #1b6ec2;
    --btn-template-border: #1861ac;
    --validation-valid: #26b050;
    --border-dcdcdc: #dcdcdc;
    --btn-template-bg2: #0062cc;
    --btn-template-border2: #005cbf;
    /* Phase 5 (P5.4): named CSS keyword colors missed by Phase 4's hex-only grep sweep */
    --validation-invalid-keyword: #ff0000; /* "red" */
    --error-banner-bg-keyword: #ffffe0;    /* "lightyellow" */

    /* Phase 5 (P5.4): more named-color/rgb() literals missed by Phase 4's hex-only sweep,
       found in Style.css. Kept invariant across themes -- each sits on its own fixed-color
       chip/button/marker (grey chip, brand-green button, required-field asterisk) rather than
       the app's semantic surface/text system, matching the precedent set by --branding and the
       other Phase 4 "kept invariant" literals. */
    --util-pure-green: green;
    --util-pure-black: #000000;
    --required-marker: rgb(225, 12, 12);

    /* Phase 5 (P5.4): ImageCarousel.razor.css "selected thumbnail" accent -- its own deliberate
       light/dark pair (was previously gated on the OS's prefers-color-scheme instead of the
       app's data-theme toggle; values themselves were already correct, just wired wrong) */
    --carousel-select-border: #0d6efd;

    /* Phase 5 (P5.4): ConversationTimeline.razor.css had zero dark-mode coverage -- its own
       --c-* custom properties (declared on .conversation-shell) fed every rule in the file from
       hardcoded literals. Redefining those --c-* values to reference these tokens (some new,
       some existing exact matches) fixes the whole component's surface/border/text foundation
       in one place rather than touching ~40 individual rules. --conv-brand/-brand-dark are a
       blue accent distinct from the app's orange --accent -- an existing, deliberate choice for
       message/composer UI, kept as its own pair rather than reassigned to brand orange. */
    --conv-surface-muted: #f8fafc;
    --conv-border: #e5e9f0;
    --conv-border-strong: #d3dae4;
    --conv-brand: #2563eb;
    --conv-brand-dark: #1d4ed8;
    --conv-body-text: #1f2937;
    --conv-lock-bg: #fffbeb;
    --conv-lock-border: #fde68a;
    --conv-lock-text: #92400e;
    --conv-lock-icon: #d97706;
    --conv-system-bg: #eef2f7;
    --conv-scrollbar-thumb: #cbd5e1;
    --conv-scrollbar-thumb-hover: #94a3b8;
    --conv-composer-disabled-bg: #f1f5f9;

    /* Phase 5: Unauthorized.razor's SimpleLayout page wrap -- not part of the main app chrome's
       --surface, its own slightly-different neutral grey */
    --surface-plain: #f5f5f5;
    --border-panel: #e5e7eb; /* PinnacleSyncActivities.razor .sync-header-card etc. */

    /* Phase 4 (P4.2): root app.css -- also default Blazor-template scaffolding, invariant */
    --link-color-alt: #006bb7;
    --focus-ring: #258cfb;
    --validation-invalid: #e50000;
    --error-boundary-bg: #b32121;
    --border-checkbox-dark: #929292;

    /* Phase 4 (P4.3): Navbar.razor -- built against its own self-contained "slate/orange"
       palette (distinct from the rest of the app's Bootstrap-derived tokens above). Dark
       values below mirror what dark-theme.css's existing .nb-* overrides already apply
       (live-verified since Phase 1-3) wherever such an override exists, so retiring an
       override later is a no-op; for the navbar sub-areas that never had dark coverage
       (subnav, portal dropdown select, credit chip, referral pill, logout danger state),
       dark values extend the same semantic system as a reasonable new default. */
    --nb-surface: #ffffff;
    --nb-border: #e2e8f0;
    --nb-border-strong: #e2e8f0;
    --nb-text-faint: #94a3b8;
    --nb-text-on-dark: #ffffff;
    --nb-text: #475569;
    --nb-surface-hover: #f1f5f9;
    --nb-text-strong: #0f172a;
    --nb-accent-tint: #fff7ed;
    --nb-accent-dark: #c2410c;
    --nb-accent-mid: #c3490a;
    --nb-accent-lightest: #f97316;
    --nb-referral-grad-1: #f97316;
    --nb-referral-grad-2: #ea580c;
    --nb-referral-grad-hover: #fb923c;
    --nb-info-pill: #0b7db0;
    --nb-success-text: #15803d;
    --nb-avatar-bg: #334155;
    --nb-slate-700: #334155;
    --nb-slate-800: #1e293b;
    --nb-dd-surface: #ffffff;
    --nb-divider: #f1f5f9;
    --nb-surface-subtle: #f8fafc;
    --nb-text-secondary2: #64748b;
    --nb-danger: #d72323;
    --nb-danger-tint: #fff5f5;
    --nb-hamburger: #1e293b;
    --nb-referral-glow: rgba(249, 115, 22, 0.55);

    /* Phase 7: site.css's shared .sy-* block (Scrap Yield, lines 2410-3057) -- a Tailwind
       slate/status-chip palette, same family already tokenized for ConversationTimeline/
       GetPriceDialog in Phases 5-6 (many exact-value reuses below). New entries are this
       block's own colors: saturated/mid-tone shades kept invariant across themes (status/accent
       colors read fine on either surface); pastel chip backgrounds get a low-opacity dark-mode
       rgba tint of their saturated sibling hue instead of staying a solid pastel (which would
       otherwise look like an unthemed light patch). */
    --sy-text-dark-green: #052e16;
    --sy-text-emerald-800: #065f46;
    --sy-bg-cyan-500: #06b6d4;
    --sy-bg-emerald-500: #10b981;
    --sy-text-green-600: #11803a;
    --sy-text-gray-700: #374151;
    --sy-accent-sky-400: #38bdf8;
    --sy-bg-blue-500: #3b82f6;
    --sy-bg-green-400: #4ade80;
    --sy-border-indigo-500: #6366f1;
    --sy-bg-violet-500: #8b5cf6;
    --sy-text-red-500: #ef4444;
    --sy-bg-rose-500: #f43f5e;
    --sy-bg-red-400: #f87171;
    --sy-border-red-300: #fca5a5;
    --sy-bg-amber-100: #fef3c7;
    --sy-bg-blue-50: #eff6ff;
    --sy-bg-green-50: #f0fdf4;
    --sy-bg-blue-100: #dbeafe;
    --sy-bg-emerald-100: #d1fae5;
    --sy-bg-green-200: #bbf7d0;
    --sy-bg-blue-200: #bfdbfe;
    --sy-bg-red-200: #fecaca;
    --sy-bg-red-50: #fef2f2;
    --sy-lock-border-tint-light: #fde68a30;
    --sy-lock-border-tint-strong: #fde68a40;
    --sy-bg-amber-400: #fbbf24;

    /* Phase 7: ScrapYieldAssessmentPage.razor/ScrapYieldRecordDetailPage.razor's own inline
       styles -- same Tailwind status-chip family as the shared .sy-* block above */
    --sy-text-emerald-700: #047857;
    --sy-text-green-800: #166534;
    --sy-bg-emerald-300: #6ee7b7;
    --sy-bg-emerald-200: #a7f3d0;
    --sy-bg-green-100: #dcfce7;

    /* Phase 8: PinnacleShopifyModuleStyles.razor's status-chip family (completed/in-progress/
       failed). Reused every existing --sy-*/--nb-*/--conv-* generic token that matched exactly;
       these 5 are genuinely new shades this file needs with no prior match. Deliberately NOT
       reusing --price-dialog-accent/--price-dialog-accent-bg (green, exact hex match for two of
       these) or --conv-brand/--conv-brand-dark (blue, exact hex match for two more) -- both are
       single-component domain tokens whose dark-mode values are tuned for their own component
       (GetPriceDialog's active-toggle accent, ConversationTimeline's brand blue) and already
       caused a real bug this same phase when reused elsewhere for "looks like the same color
       right now" reasons (see findings-todo.md's ScrapYieldSettingPage green-card incident) --
       fresh --sy-* tokens keep this status-chip family independently themeable. */
    --sy-bg-rose-50: #fff1f2;
    --sy-border-rose-200: #fecdd3;
    --sy-text-rose-700: #be123c;
    --sy-bg-emerald-50: #ecfdf5;
    --sy-text-emerald-600: #059669;
    --sy-text-blue-600: #2563eb;
    --sy-text-blue-700: #1d4ed8;

    /* Phase 8: ShopifyAdmin.razor's own inline <style> block -- more Tailwind shades with no
       existing match. --busy-overlay-bg is the one non-Tailwind-chip token here: a full-screen
       loading scrim that must actually flip dark (a white translucent haze would wash out a dark
       page) rather than stay invariant like the shadow/overlay tints elsewhere in this project. */
    --sy-bg-violet-100: #ede9fe;
    --sy-text-violet-800: #5b21b6;
    --sy-border-blue-300: #93c5fd;
    --sy-border-green-300: #86efac;
    --sy-bg-gray-100: #f3f4f6;
    --busy-overlay-bg: rgba(255, 255, 255, 0.65);

    /* Phase 8: Categories.razor's category-editor slide-in panel used Bootstrap-primary-blue
       (#0d6efd) as a paired accent alongside --sy-bg-blue-500 (#3b82f6, already invariant across
       themes) in the same gradient -- kept this one invariant too rather than reusing
       --carousel-select-border, which shares this exact light-mode hex but is ImageCarousel's
       own deliberate light/dark accent pair (flips to cyan #0dcaf0 in dark mode) -- reusing it
       here would have turned this stepper's blue accent cyan for an unrelated component.
       PinnacleSetup.razor's summary-card accent stripe pairs it with a second, lighter blue. */
    --sy-accent-blue-600: #0d6efd;
    --sy-accent-blue-400: #4dabf7;

    /* Phase 8 Batch 3: the parallel Pinnacle/Shopify "Sync Activities" family (AdminPortal +
       PlatformPortal, ~8 near-identical variants) share one status-badge palette (completed/
       pending/failed/in-progress/neutral) -- these two -800 text shades had no prior token. */
    --sy-text-amber-800: #92400e;
    --sy-text-red-800: #991b1b;

    /* Phase 8: ShopifyTaxonomyPicker.razor's "leaf node" marker -- a distinctive Bootstrap-purple
       border, single usage, kept invariant like the other one-off accent markers in this file. */
    --sy-accent-purple-600: #6f42c1;

    /* Phase 8 Batch 5: Offshore Sales financial-tile family (OffshoreCashflowPage/
       OffshoreInvoiceDetail/CustomerStatement share a "currency warning banner" + "summary tile"
       pattern). Deliberately NOT reusing --syu-accent-blue-800 (exact hex match) -- that token
       flips to a much lighter blue (#3b82f6) in dark mode for ScrapYieldUpload's own accent use,
       which would visibly change these finance tiles' "primary" color identity. */
    --sy-border-amber-300: #fcd34d;
    --sy-text-amber-700: #b45309;
    --sy-bg-green-600: #018749;
    --sy-text-gray-600: #4b5563;
    --sy-text-red-900: #7f1d1d;
    --sy-text-rose-800: #9f1239;
    --sy-text-blue-800: #1e40af;

    /* Phase 8 Batch 6: Navbar.razor's profile-avatar "verify dot" SVG icons (checkmark = fully
       verified, warning = unverified) -- missed by Phase 4's sweep since these are inline SVG
       attributes, not the tokenized <style> block. Distinct bright shades chosen for a 12x12
       icon's visibility, kept invariant (not the same as --nb-success-text/--accent). */
    --nb-verify-success: #03C93A;
    --nb-verify-warning: #FFA41B;

    /* Phase 9 P9.1: MainLayout.razor's #header wrapper was using --text-strong (a body-text
       role token) as its background -- harmless in light mode (both happened to be #333333)
       but broke in dark mode once --text-strong flipped to near-white for readability, leaving
       white-on-white text. Dedicated invariant token instead, exact same light-mode appearance. */
    --nb-header-bg: #333333;

    /* Phase 8: PinnacleShopifyReadyRecords.razor's unpublish-button hover state */
    --sy-bg-red-100: #fee2e2;

    /* Phase 7: Reports/AdminPortal Dashboard.razor's own chart/category colors -- decorative
       gradient-stop and income/expense-category coding, kept invariant across themes for the
       same reason as JobsPage's job-card colors (stable visual association, not a surface/text
       role). The real dark-mode bug here was the SfChart/SfAccumulationChart Theme parameter
       never being set (dead ThemeHelper reference), fixed in Dashboard.razor.cs instead. */
    --dash-gradient-amber: #FEC200;
    --dash-gradient-lime: #8cff32;
    --dash-gradient-blue: #0000FF;
    --dash-income: #17a00e;
    --dash-balance: #008cff;
    --dash-transaction: #f41127;
    --dash-expense: #ca765a;
    --dash-text-grey: #4c5258;
    --dash-expense-payment: #ff5e65;
    --dash-income-payment: #04cd93;
    --dash-border-slate: #435266;

    /* Phase 7: DriverTrackerPage.razor.css -- a Material Design status palette (blue/teal/
       green/orange/red) plus plain greys. Greys are dark-aware (they were the actual "white
       patch" risk); the colored status indicators are kept invariant, same reasoning as the
       Scrap Yield/JobsPage category palettes. */
    --dt-blue-700: #0078d4;
    --dt-teal-500: #009688;
    --dt-blue-900: #0d47a1;
    --dt-green-900: #1b5e20;
    --dt-green-800: #2e7d32;
    --dt-blue-300: #64b5f6;
    --dt-blue-50: #e3f2fd;
    --dt-orange-900: #c34500;
    --dt-green-tint-1: #e6f4ea;
    --dt-green-tint-2: #e8f5e9;
    --dt-blue-tint: #f0f8ff;
    --dt-orange-500: #ff9800;
    --dt-red-tint: #ffebee;
    --dt-orange-tint: #fff3e0;
    --dt-text-555: #555555;
    --dt-text-777: #777777;
    --dt-text-616161: #616161;
    --dt-bg-9e9e9e: #9e9e9e;
    --dt-bg-e0e0e0: #e0e0e0;
    --dt-border-eee: #eeeeee;
    --dt-bg-fafafa: #fafafa;

    /* Phase 7: AssistantChat.razor.css/AssistantMonitor.razor.css's own literals not already
       covered by the reused tokens above */
    --assistant-connected: #22c55e;
    --assistant-text-gray-500: #6b7280;
    --assistant-text-gray-400: #666f7e;
    --assistant-pink: #c22774;
    --assistant-off-white: #f8f8f2;
    --assistant-orange-border: #fed7aa;

    /* Phase 7: Overview.razor -- an orphaned Syncfusion sample page (confirmed zero inbound
       navigation) sharing Dashboard.razor's chart-palette family; kept invariant for the same
       reason as every other decorative chart/category color set this phase. */
    --ov-chart-1: #00BCD7;
    --ov-header-1a1a1a: #1A1A1A;
    --ov-chart-2: #2485FA;
    --ov-header-303030: #303030;
    --ov-chart-3: #3D4EB8;
    --ov-chart-4: #4472c4;
    --ov-chart-5: #5b9bd5;
    --ov-chart-6: #61EFCD;
    --ov-chart-7: #6f6fe2;
    --ov-chart-8: #70ad47;
    --ov-text-737373: #737373;
    --ov-chart-9: #8854D9;
    --ov-chart-10: #997300;
    --ov-chart-11: #9e480e;
    --ov-chart-12: #C152D2;
    --ov-chart-13: #CDDE1F;
    --ov-header-f3f2f1: #F3F2F1;
    --ov-header-222222: #222222;
    --ov-chart-14: #F57D7D;
    --ov-chart-15: #c1c1c1;
    --ov-chart-16: #e269ae;
    --ov-chart-17: #ed7d31;
    --ov-chart-18: #ffc000;

    /* Phase 7 follow-up: ScrapYieldPhotoUpload.razor's .syu-* classes -- an unscoped inline
       <style> block (no .razor.css companion) with zero dark coverage, found via human
       live-verification after the initial Phase 7 pass. */
    --syu-border-gray-300: #d1d5db;
    --syu-accent-blue-800: #1e40af;
    --syu-text-gray-900: #111827;

    /* Phase 8 Batch 7: long-tail sweep across ~100 low-hex-count files. Grouped here by the
       agent that tokenized them; most reused existing tokens, these are the genuinely new ones. */
    --shopify-embedded-bg: #f6f6f7;
    --verify-danger-hover-bg: #edbfbf;
    --surface-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    --perm-row-border: #f1f1f1;
    --referral-chip-bg: #ebebeb;
    --referral-accent-blue: #007bff;
    --thumb-shadow-color: rgba(0, 0, 0, 0.2);
    --nav-active-bg: #333333;
    --nb-legacy-text: #0b79c0;
    --nav-sidebar-link-text: #d7d7d7;
    --ml-sidebar-grad-end: #3a0647;
    --ml-topbar-bg: #f7f7f7;
    --ml-topbar-border: #d6d5d5;
    --imgdlg-indicator-bg: #ECECEC;
    --imgdlg-indicator-active-bg: #3C78EF;
    --imgdlg-indicator-border: #e3e3e3;
    --err-404-stroke: #c0392b;
    --cr-referral-link-bg: #ebebeb;
    --cr-referral-link-text: #000000;
    --cr-primary-blue: #007bff;
    --rb-checkbox-border: #000000;
    --dev-text-muted: #444444;
    --dev-panel-bg: #f5f7fa;
    --dev-panel-border: #e3e6ec;
    --dev-card-border: #d0d7de;
    --dev-link: #0969da;
    --dev-badge-bg: #eef1f4;
    --dev-code-bg: #f6f8fa;
    --dev-code-border: #e1e4e8;
    --dev-diff-added-bg: #dafbe1;
    --dev-diff-added-text: #1a7f37;
    --dev-diff-removed-bg: #ffebe9;
    --dev-diff-removed-text: #cf222e;
    --dev-diff-modified-bg: #fff8c5;
    --dev-diff-modified-text: #9a6700;
    --pp-drawer-divider: #eef1f4;
    --pp-drawer-border: #e9ecef;
    --sy-text-amber-600: #d97706;
    --carousel-demo-container-bg: #e5e5e5;
    --carousel-demo-caption-text: #ffffff;
    --car-summary-box-border: #f4f4f4;
    --hy-transit-text: #888888;
    --job-status-bg-orange: #ffecd1;
    --job-status-bg-blue: #d1efff;
    --job-status-bg-green: #d1ffd1;
    --sy-accent-blue-700: #0b5ed7;
    --ncd-border: #dddddd;
    --jsc-cached-bg: #f2f1ed;
    --jsc-uncached-bg: #79e8c2;
    --jsc-active-bg: #adb1b7;
    --evt-accent-jobtrip: #4F46E5;
    --evt-accent-yardtrip: #0F766E;
    --evt-accent-break: #C026D3;
    --sb-active-bg: #333333;
    --select-row-border: #e1e1e1;
    --select-row-hover-bg: #e1e1e1;
    --catimg-drop-border: #cbd5e1;
    --catimg-drop-bg: #f8fafc;
    --conv-count-bg: #eef2ff;
    --conv-badge-neutral-bg: #e2e8f0;
    --conv-send-disabled-bg: #cbd5e1;
    --conv-send-disabled-text: #3e5c83;
    --upload-heading-accent: #03a92d;
    /* Phase 10 P10.1 guardrail sweep: newly-caught literals the hex-only checks used
       through Phase 1-9 never covered (named CSS colors, and 8-digit alpha-hex the
       {3,6}-digit regex missed). */
    --evt-stripe-light: #eae7e76b;
    --evt-stripe-transparent: #f1f1f100;
    --dev-console-bg: #000000;

    /* Phase 10 P10.1: site.css's .ob-* PinnacleShopifyOnboarding shell -- a Phase 7/8
       gap (the .sy-* family in the same file was tokenized, this sibling block wasn't).
       Fixed sidebar chrome kept invariant, same reasoning as --chrome-dark/--nb-*. */
    --ob-shell-bg: #f1f5f9;
    --ob-nav-bg: #0f172a;
    --ob-nav-text: #94a3b8;
    --ob-nav-accent: #f7921e;
    --ob-nav-text-active: #f8fafc;

    /* Phase 10 P10.1: site.css's .os-* Offshore-portal shared primitives (register
       tiles, chips, drawer shell) -- the sibling .ob-* gap's companion, same root cause. */
    --os-heading-text: #1e293b;
    --os-tile-bg: #f8fafc;
    --os-icon-muted: #94a3b8;

    /* Phase 10 P10.1 (stylelint pass): rgb()/rgba()/named-color debt the old regex-only
       guardrail couldn't see -- most of site.css's remaining literals map onto existing tokens
       (see the site.css edits themselves), these five didn't have a match. All invariant
       (decorative or fixed-chrome, not surface/text roles that should flip with the theme). */
    --legacy-blue-icon: #4a6de1;      /* site.css .sn-upload-list icon -- confirmed dead CSS (no markup references .sn-upload-list anywhere), fixed anyway since it's zero-risk */
    --legacy-dashboard-stat: #646de2; /* site.css .dashboard-stats .dashboard-item text -- confirmed dead CSS (no markup references .dashboard-stats), fixed anyway since it's zero-risk */
    --legacy-form-border: #e5eff8;    /* site.css .stc-form section border -- confirmed dead CSS (no markup references .stc-form/.login-container), fixed anyway since it's zero-risk */
    --ci-section-band: #20b2aa;       /* CarInquiryDetails.razor's repeated section-divider band (was literal "lightseagreen") -- decorative, same invariant reasoning as JobsPage's category palette */
    --row-success-tint: rgba(126, 255, 156, 0.12);  /* WebsiteEmailInquiryPage.razor .sn-job-created-row -- translucent row highlight, same "generic tint" precedent as shadow/scrim rgba() literals */
    --row-danger-tint: rgba(255, 126, 126, 0.12);   /* WebsiteEmailInquiryPage.razor .sn-job-created-row-no-deal -- same precedent as --row-success-tint */
    --price-dialog-total-title-text: rgba(255, 255, 255, .85);      /* GetPriceDialog-family "Grand Total" card text on an always-colored accent background -- same --text-on-accent-with-opacity convention */
    --price-dialog-total-caption-text: rgba(255, 255, 255, .75);    /* same card, secondary line */
    --price-dialog-total-subcaption-text: rgba(255, 255, 255, .6);  /* same card, tertiary/caption line */
    --header-icon-on-accent: rgba(255, 255, 255, .9);  /* ScrapYieldAssessmentPage.razor's expand/collapse arrow on an accent-colored header bar -- same convention */

    /* Phase 10 guardrail fix: Referral (Refer & Earn) dashboard panels' own warm-grey text
       family -- distinct hue from the app's cool-grey Bootstrap-derived tiers, same reasoning as
       the Phase 5 Tailwind-slate set. Genuine text roles (label/body/heading), so they flip with
       the theme via alias rather than staying invariant. */
    --rf-text-faint: #898781;  /* ReferralDashboardPanel.razor .rf-stat-label uppercase caption */
    --rf-text-muted: #52514e;  /* ReferralDashboardPanel/EarningsLedger/ReferredTenants panels' body/description text */
    --rf-text-strong: #0b0b0b; /* same panels' headings and large stat numbers */
}

/* Printing always uses light theme regardless of the current on-screen theme (reported: printing
   from dark mode showed grey text in the print preview instead of black) -- browsers apply
   screen CSS to print unless told otherwise, and every dark-theme.css rule reads its colors from
   these custom properties, so wrapping just this block in @media screen is enough: during print,
   these overrides don't apply, every var(--text)/var(--surface)/etc. reference anywhere in the
   app (including inside dark-theme.css's own html[data-theme="dark"] rules, which still *match*
   during print, just resolve to light values) falls back to the plain :root light values above,
   and print renders exactly as if the page had been in light mode all along -- no separate
   @media print stylesheet needed. */
@media screen {
html[data-theme="dark"] {
    color-scheme: dark;

    /* Phase 6: site.css's legacy --branding (#F39200) is consumed directly in ~54 places across
       the app (buttons, step indicators, active states, this Quotes-tree file's redundant
       hex-then-var() pairs) and was never given a dark value in any prior phase, so every one of
       those consumers has been rendering the raw, harsh light-mode orange in dark mode this
       whole time. Aliasing it to --accent here is a pure addition (light mode is untouched,
       still #F39200) that retroactively fixes every one of those 54 usages at once, the same fix
       already applied ad hoc to the .nav-tabs .nav-link.active rule in Phase 6. */
    --branding: var(--accent);

    /* surfaces: page -> card -> input/nested -> hover/active */
    --surface: #0d1117;
    --surface-raised: #161b27;
    --surface-inset: #171b26;
    --surface-hover: #252d3f;

    /* borders: translucent so they sit on any surface */
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.13);

    /* text tiers */
    --text: #e2e8f4;
    --text-secondary: #8c95ab;
    --text-faint: #77849f;

    /* accent: #f59e0b for contrast on dark surfaces (brand #F39200 retained elsewhere, e.g. the logo) */
    --accent: #f59e0b;
    --accent-bg: rgba(245, 158, 11, 0.1);
    --accent-bd: rgba(245, 158, 11, 0.3);

    /* status: tinted chips (rgba(color,.1) bg / .25 border where consumed) */
    --status-success: #4ade9a;
    --status-error: #ff6b6b;
    --status-warning: #fbbf24;
    --status-info: #a78bfa;

    /* Phase 4: --sn-* legacy variable set, dark counterparts */
    --surface-subtle: #1a2030;
    --border-soft: rgba(255, 255, 255, 0.06);
    --text-strong: #e2e8f4;
    --cta-bg: #f59e0b;
    --cta-bg-hover: #fbbf24;
    --btn-dark-bg: #252d3f;
    --btn-dark-bg-hover: #1e2535;
    --surface-disabled: #3a4257;
    --text-on-disabled: #8892a8;

    --text-on-accent: #ffffff;

    --status-success-bg: rgba(74, 222, 154, 0.12);
    --status-warning-bg: rgba(251, 191, 36, 0.12);
    --status-error-bg: rgba(255, 107, 107, 0.12);
    --status-info-bg: rgba(167, 139, 250, 0.12);
    --surface-muted: var(--surface-hover);

    --text-muted-alt: #8892a8;
    --border-dashed: rgba(255, 255, 255, 0.15);
    --text-icon-muted: #8892a8;
    --surface-deep: #031022;
    --text-grey: #8892a8;
    --text-heading: #e2e8f4;
    --border-faint: rgba(255, 255, 255, 0.05);
    --alert-accent: #ff7f00;
    --text-emphasis: #e2e8f4;
    --surface-faint: #1e2535;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.1);
    --surface-active: #252d3f;
    --text-tab: #8892a8;
    --overlay-scrim: rgba(13, 17, 23, 0.8);
    --loader-accent: #f59e0b;
    --job-active-bg: rgba(245, 158, 11, 0.32);
    --scrollbar-thumb: #4a5468;
    --carousel-active-border: #007bff;

    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.45);

    --border-card: var(--border);
    --text-muted-slate: var(--text-secondary);

    --status-warning-text: var(--status-warning);
    --status-warning-border: rgba(251, 191, 36, 0.3);

    --surface-cream: var(--surface-raised);

    --surface-job-card: var(--surface-hover);
    --border-job-card: var(--border-strong);

    --surface-zebra-dark: var(--surface-inset);
    --surface-zebra-light: var(--surface-hover);

    --price-dialog-accent: #34d399;
    --price-dialog-accent-bg: rgba(52, 211, 153, 0.12);
    --price-dialog-active-fill: var(--price-dialog-accent);
    --price-dialog-error: #f87171;
    --price-dialog-warning-icon: #f59e0b;
    --sy-text-strong: var(--text);

    --sn-tree-border: var(--border-strong);
    --accent-bg-strong: rgba(245, 158, 11, 0.23);
    --conversation-dialog-hover-bg: var(--surface-hover);
    --sn-shadow-light: var(--border-strong);

    --chrome-dark: #1f2531;
    --chrome-darker: #17161a;

    --util-blue: #2196F3;
    --util-purple-1: #845cb8;
    --util-purple-2: #8963bb;
    --util-black: #444444;
    --border-ddd: #dddddd;
    --shadow-neutral: #919191;
    --util-green: #4CAF50;
    --util-yellow: #fff400;
    --util-red: #ff0018;
    --util-grey-c8: #c8c8c8;

    --link-color: #0366d6;
    --btn-template-bg: #1b6ec2;
    --btn-template-border: #1861ac;
    --validation-valid: #26b050;
    --border-dcdcdc: #dcdcdc;
    --btn-template-bg2: #0062cc;
    --btn-template-border2: #005cbf;
    --validation-invalid-keyword: #ff0000;
    --error-banner-bg-keyword: #ffffe0;

    --util-pure-green: green;
    --util-pure-black: #000000;
    --required-marker: rgb(225, 12, 12);
    --carousel-select-border: #0dcaf0;

    --conv-surface-muted: var(--surface-inset);
    --conv-border: var(--border);
    --conv-border-strong: var(--border-strong);
    --conv-brand: #3b82f6;
    --conv-brand-dark: #2563eb;
    --conv-body-text: var(--text);
    --conv-lock-bg: var(--status-warning-bg);
    --conv-lock-border: var(--status-warning-border);
    --conv-lock-text: var(--status-warning-text);
    --conv-lock-icon: var(--status-warning);
    --conv-system-bg: var(--surface-inset);
    --conv-scrollbar-thumb: var(--border-strong);
    --conv-scrollbar-thumb-hover: var(--text-faint);
    --conv-composer-disabled-bg: var(--surface-inset);

    --surface-plain: var(--surface);
    --border-panel: var(--border);

    --link-color-alt: #006bb7;
    --focus-ring: #258cfb;
    --validation-invalid: #e50000;
    --error-boundary-bg: #b32121;
    --border-checkbox-dark: #929292;

    --nb-surface: var(--surface-raised);
    --nb-border: var(--border);
    --nb-border-strong: var(--border-strong);
    --nb-text-faint: var(--text-faint);
    --nb-text-on-dark: #ffffff;
    --nb-text: #8f98ad;
    --nb-surface-hover: var(--surface-inset);
    --nb-text-strong: var(--text);
    --nb-accent-tint: var(--accent-bg);
    --nb-accent-dark: var(--accent);
    --nb-accent-mid: var(--accent);
    --nb-accent-lightest: var(--accent);
    --nb-referral-grad-1: #f97316;
    --nb-referral-grad-2: #ea580c;
    --nb-referral-grad-hover: #fb923c;
    --nb-info-pill: #0b7db0;
    --nb-success-text: var(--status-success);
    --nb-avatar-bg: var(--surface-hover);
    --nb-slate-700: var(--text);
    --nb-slate-800: var(--text);
    --nb-dd-surface: var(--surface-inset);
    --nb-divider: var(--border);
    --nb-surface-subtle: var(--surface-inset);
    --nb-text-secondary2: var(--text-secondary);
    --nb-danger: var(--status-error);
    --nb-danger-tint: var(--status-error-bg);
    --nb-hamburger: var(--text-secondary);
    --nb-referral-glow: rgba(249, 115, 22, 0.55);

    --sy-text-dark-green: #052e16;
    --sy-text-emerald-800: #0a976f;
    --sy-bg-cyan-500: #06b6d4;
    --sy-bg-emerald-500: #10b981;
    --sy-text-green-600: #16a34a;
    --sy-text-gray-700: #7a8aa5;
    --sy-accent-sky-400: #38bdf8;
    --sy-bg-blue-500: #3b82f6;
    --sy-bg-green-400: #4ade80;
    --sy-border-indigo-500: #6366f1;
    --sy-bg-violet-500: #8b5cf6;
    --sy-text-red-500: #ef4444;
    --sy-bg-rose-500: #f43f5e;
    --sy-bg-red-400: #f87171;
    --sy-border-red-300: #fca5a5;
    --sy-bg-amber-100: rgba(217, 119, 6, 0.14);
    --sy-bg-blue-50: rgba(59, 130, 246, 0.08);
    --sy-bg-green-50: rgba(74, 222, 128, 0.08);
    --sy-bg-blue-100: rgba(59, 130, 246, 0.15);
    --sy-bg-emerald-100: rgba(16, 185, 129, 0.14);
    --sy-bg-green-200: rgba(74, 222, 128, 0.18);
    --sy-bg-blue-200: rgba(59, 130, 246, 0.18);
    --sy-bg-red-200: rgba(239, 68, 68, 0.18);
    --sy-bg-red-50: rgba(239, 68, 68, 0.08);
    --sy-lock-border-tint-light: #fde68a30;
    --sy-lock-border-tint-strong: #fde68a40;
    --sy-bg-amber-400: #fbbf24;

    --sy-text-emerald-700: #05976d;
    --sy-text-green-800: #24a254;
    --sy-bg-emerald-300: #6ee7b7;
    --sy-bg-emerald-200: #a7f3d0;
    --sy-bg-green-100: rgba(34, 197, 94, 0.14);

    --sy-bg-rose-50: rgba(244, 63, 94, 0.08);
    --sy-border-rose-200: #fecdd3;
    --sy-text-rose-700: #ed3c67;
    --sy-bg-emerald-50: rgba(16, 185, 129, 0.08);
    --sy-text-emerald-600: #059669;
    --sy-text-blue-600: #4b7eee;
    --sy-text-blue-700: #6185ea;

    --sy-bg-violet-100: rgba(139, 92, 246, 0.1);
    --sy-text-violet-800: #9a6be4;
    --sy-border-blue-300: #93c5fd;
    --sy-border-green-300: #86efac;
    --sy-bg-gray-100: rgba(107, 114, 128, 0.08);
    --busy-overlay-bg: rgba(13, 17, 23, 0.65);

    --sy-accent-blue-600: #0d6efd;
    --sy-accent-blue-400: #4dabf7;

    --sy-text-amber-800: #e96617;
    --sy-text-red-800: #e25c5c;

    --sy-accent-purple-600: #6f42c1;

    --sy-border-amber-300: #fcd34d;
    --sy-text-amber-700: #de660b;
    --sy-bg-green-600: #018749;
    --sy-text-gray-600: #7d8a9d;
    --sy-text-red-900: #d95757;
    --sy-text-rose-800: #9f1239;
    --sy-text-blue-800: #5e7de3;

    --nb-verify-success: #03C93A;
    --nb-verify-warning: #FFA41B;
    --nb-header-bg: #333333;

    --sy-bg-red-100: rgba(239, 68, 68, 0.14);

    --dash-gradient-amber: #FEC200;
    --dash-gradient-lime: #8cff32;
    --dash-gradient-blue: #0000FF;
    --dash-income: #17a00e;
    --dash-balance: #008cff;
    --dash-transaction: #f41127;
    --dash-expense: #ca765a;
    --dash-text-grey: var(--text-secondary);
    --dash-expense-payment: #ff5e65;
    --dash-income-payment: #04cd93;
    --dash-border-slate: #435266;

    --dt-blue-700: #0078d4;
    --dt-teal-500: #009688;
    --dt-blue-900: #3c83ef;
    --dt-green-900: #2fa237;
    --dt-green-800: #3ba140;
    --dt-blue-300: #64b5f6;
    --dt-blue-50: rgba(59, 130, 246, 0.1);
    --dt-orange-900: #ec5300;
    --dt-green-tint-1: rgba(74, 222, 128, 0.12);
    --dt-green-tint-2: rgba(74, 222, 128, 0.12);
    --dt-blue-tint: rgba(59, 130, 246, 0.1);
    --dt-orange-500: #ff9800;
    --dt-red-tint: rgba(239, 68, 68, 0.12);
    --dt-orange-tint: rgba(230, 81, 0, 0.14);
    --dt-text-555: var(--text-secondary);
    --dt-text-777: var(--text-secondary);
    --dt-text-616161: var(--text);
    --dt-bg-9e9e9e: var(--surface-hover);
    --dt-bg-e0e0e0: var(--surface-active);
    --dt-border-eee: var(--border);
    --dt-bg-fafafa: var(--surface-hover);

    --assistant-connected: #22c55e;
    --assistant-text-gray-500: var(--text-secondary);
    --assistant-text-gray-400: #8a96ad;
    --assistant-pink: #e26ea8;
    --assistant-off-white: var(--text-on-accent);
    --assistant-orange-border: rgba(230, 81, 0, 0.3);

    --ov-chart-1: #00BCD7;
    --ov-header-1a1a1a: var(--text);
    --ov-chart-2: #2485FA;
    --ov-header-303030: var(--text);
    --ov-chart-3: #3D4EB8;
    --ov-chart-4: #4472c4;
    --ov-chart-5: #5b9bd5;
    --ov-chart-6: #61EFCD;
    --ov-chart-7: #6f6fe2;
    --ov-chart-8: #70ad47;
    --ov-text-737373: var(--text-secondary);
    --ov-chart-9: #8854D9;
    --ov-chart-10: #997300;
    --ov-chart-11: #9e480e;
    --ov-chart-12: #C152D2;
    --ov-chart-13: #CDDE1F;
    --ov-header-f3f2f1: var(--surface-inset);
    --ov-header-222222: var(--text);
    --ov-chart-14: #F57D7D;
    --ov-chart-15: #c1c1c1;
    --ov-chart-16: #e269ae;
    --ov-chart-17: #ed7d31;
    --ov-chart-18: #ffc000;

    --syu-border-gray-300: var(--border-strong);
    --syu-accent-blue-800: #1b6df5;
    --syu-text-gray-900: var(--text);

    /* Phase 8 Batch 7 dark overrides -- see :root for light values + provenance notes */
    --shopify-embedded-bg: var(--surface);
    --verify-danger-hover-bg: rgba(255, 107, 107, 0.18);
    --surface-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --perm-row-border: rgba(255, 255, 255, 0.08);
    --referral-chip-bg: var(--surface-hover);
    --referral-accent-blue: #007bff;
    --thumb-shadow-color: rgba(0, 0, 0, 0.2);
    --nav-active-bg: #333333;
    --nb-legacy-text: #38bdf8;
    --nav-sidebar-link-text: #d7d7d7;
    --ml-sidebar-grad-end: #3a0647;
    --ml-topbar-bg: var(--surface-raised);
    --ml-topbar-border: var(--border-strong);
    --imgdlg-indicator-bg: var(--surface-active);
    --imgdlg-indicator-active-bg: #3C78EF;
    --imgdlg-indicator-border: var(--border-strong);
    --err-404-stroke: #ff6b6b;
    --cr-referral-link-bg: #252d3f;
    --cr-referral-link-text: var(--text);
    --cr-primary-blue: #4dabf7;
    --rb-checkbox-border: rgba(255, 255, 255, 0.2);
    --dev-text-muted: var(--text-secondary);
    --dev-panel-bg: var(--surface-inset);
    --dev-panel-border: var(--border);
    --dev-card-border: var(--border-strong);
    --dev-link: #58a6ff;
    --dev-badge-bg: var(--surface-hover);
    --dev-code-bg: var(--surface-inset);
    --dev-code-border: var(--border);
    --dev-diff-added-bg: rgba(26, 127, 55, 0.14);
    --dev-diff-added-text: #1f9a43;
    --dev-diff-removed-bg: rgba(207, 34, 46, 0.14);
    --dev-diff-removed-text: #e2505a;
    --dev-diff-modified-bg: rgba(154, 103, 0, 0.14);
    --dev-diff-modified-text: #b67a00;
    --pp-drawer-divider: rgba(255, 255, 255, 0.06);
    --pp-drawer-border: rgba(255, 255, 255, 0.08);
    --sy-text-amber-600: #d97706;
    --carousel-demo-container-bg: #e5e5e5;
    --carousel-demo-caption-text: #ffffff;
    --car-summary-box-border: #f4f4f4;
    --hy-transit-text: #8892a8;
    --job-status-bg-orange: rgba(217, 119, 6, 0.14);
    --job-status-bg-blue: rgba(59, 130, 246, 0.15);
    --job-status-bg-green: rgba(74, 222, 128, 0.18);
    --sy-accent-blue-700: #3985f5;
    --ncd-border: var(--border-strong);
    --jsc-cached-bg: var(--surface-hover);
    --jsc-uncached-bg: rgba(74, 222, 154, 0.18);
    --jsc-active-bg: var(--surface-active);
    --evt-accent-jobtrip: #4F46E5;
    --evt-accent-yardtrip: #0F766E;
    --evt-accent-break: #C026D3;
    --sb-active-bg: #333333;
    --select-row-border: rgba(255, 255, 255, 0.12);
    --select-row-hover-bg: #252d3f;
    --catimg-drop-border: rgba(255, 255, 255, 0.13);
    --catimg-drop-bg: #171b26;
    --conv-count-bg: rgba(37, 99, 235, 0.18);
    --conv-badge-neutral-bg: rgba(255, 255, 255, 0.13);
    --conv-send-disabled-bg: #3a4257;
    --conv-send-disabled-text: #a7b0c1;
    --upload-heading-accent: #03a92d;
    /* Phase 10 P10.1 guardrail sweep: newly-caught literals the hex-only checks used
       through Phase 1-9 never covered (named CSS colors, and 8-digit alpha-hex the
       {3,6}-digit regex missed). */
    --evt-stripe-light: #eae7e76b;
    --evt-stripe-transparent: #f1f1f100;
    --dev-console-bg: #000000;

    /* Phase 10 P10.1: site.css's .ob-* PinnacleShopifyOnboarding shell -- a Phase 7/8
       gap (the .sy-* family in the same file was tokenized, this sibling block wasn't).
       Fixed sidebar chrome kept invariant, same reasoning as --chrome-dark/--nb-*. */
    --ob-shell-bg: var(--surface);
    --ob-nav-bg: #0f172a;
    --ob-nav-text: #94a3b8;
    --ob-nav-accent: #f7921e;
    --ob-nav-text-active: #f8fafc;

    /* Phase 10 P10.1: site.css's .os-* Offshore-portal shared primitives (register
       tiles, chips, drawer shell) -- the sibling .ob-* gap's companion, same root cause. */
    --os-heading-text: var(--text);
    --os-tile-bg: var(--surface-hover);
    --os-icon-muted: var(--text-secondary);

    /* Phase 10 P10.1 (stylelint pass): invariant -- same values as the light block, see there
       for what each one is and why it doesn't flip with the theme. */
    --legacy-blue-icon: #4a6de1;
    --legacy-dashboard-stat: #646de2;
    --legacy-form-border: #e5eff8;
    --ci-section-band: #20b2aa;
    --row-success-tint: rgba(126, 255, 156, 0.12);
    --row-danger-tint: rgba(255, 126, 126, 0.12);
    --price-dialog-total-title-text: rgba(255, 255, 255, .85);
    --price-dialog-total-caption-text: rgba(255, 255, 255, .75);
    --price-dialog-total-subcaption-text: rgba(255, 255, 255, .6);
    --header-icon-on-accent: rgba(255, 255, 255, .9);

    --rf-text-faint: var(--text-secondary);
    --rf-text-muted: var(--text-secondary);
    --rf-text-strong: var(--text);
}
}