/* Main UI palette ownership: main_ui-styles.js imports this after vendor CSS and before
   authored consumers. These are opaque defaults; component caller/disabled/View-mode
   overrides remain at their existing scope. Apply original alpha with
   rgb(from var(--tt-color-...) r g b / alpha), never element opacity.
   Purpose and foreground/fill/state relationships govern consolidation; near color
   distance alone does not justify merging error/selection or primary/secondary states.
   Vendor/assets, configured chart/business palettes and independent Recruitment/
   Quick Punch/shared legacy widget hosts retain their own owners. */
:root {
    /* Issue #3894: Login's photo-backed shell needs a visible neutral frame/halo,
       independently of ordinary black occlusion shadows. Controls and the brand
       band have their own chrome roles; defaults preserve Light's existing faces. */
    --tt-color-login-frame: var(--tt-color-black);
    --tt-color-login-halo: var(--tt-color-black);
    --tt-color-login-header-bg: var(--tt-color-surface);
    --tt-color-login-header-border: var(--tt-color-border-soft);
    --tt-color-login-control-bg: var(--tt-color-control-bg);
    --tt-color-login-control-border: var(--tt-color-accent-border);
    /* Issue #3894: AwesomeBox's padded pane frame, title and transfer rail are
       structural chrome, not action/selection fills. Retain Light blue while Dark
       uses neutral section contrast; popup shadows preserve their own Light endpoint. */
    --tt-color-picker-panel-bg: var(--tt-color-accent-hover);
    --tt-color-picker-panel-shadow: #666666;
    /* Issue #3894: OPEN shift faces retain released white in Light. Dark uses
       a golden fill above the quieter amber OPEN row so unassigned work stays
       identifiable without changing configured shift accents or selection colors. */
    --tt-color-schedule-open-card-bg: var(--tt-color-surface);
    /* Issue #3894: Generated reports keep their exact released Light stripes/header;
       Dark reuses main neutral surfaces. Separate roles prevent table print colors
       from becoming an independent dark palette. */
    --tt-color-report-header-bg: #dcdcdc;
    --tt-color-report-row-bg: #f0f0f0;
    /* Issue #3894: The app-owned report title/frame are chrome, independent of
       primary action blue and the iframe's black/white reading canvas. */
    --tt-color-report-window-bg: var(--tt-color-accent);
    --tt-color-report-window-border: var(--tt-color-accent);
    /* Issue #3894: Fixed white remains the inverse foreground and image/document endpoint.
       Themeable panels and inputs use surface/control-bg instead; solid action labels remain white. */
    --tt-color-white: #ffffff;

    /* Issue #3894: Panels, tables, menus and modal shells share the neutral canvas.
       Light retains white; Dark resolves its neutral depth through the overrides below. */
    --tt-color-surface: var(--tt-color-white);

    /* Issue #3894: Editable inputs and compact control faces retain their own inset backing.
       Light matches existing white inputs; Dark keeps inset faces distinct from the canvas through control-text/border. */
    --tt-color-control-bg: var(--tt-color-white);

    /* Issue #3894: Shadows/backdrops must stay dark when reading text brightens.
       Preserve the Light endpoint and each consumer alpha; Dark uses true-black occlusion. */
    --tt-color-shadow: #142638;

    /* Issue #3894: Solid selected range actions pair this fill with fixed inverse labels,
       independently of the bright link/focus reading color in Dark. */
    --tt-color-accent-solid-bg: #2468a2;

    /* Issue #3894: Membership tooltips retain inverse copy on dark chrome in either mode. */
    --tt-color-inverse-surface: #142638;

    /* Issue #3894: Header chrome retains brand blue in Light and separate navigation chrome in Dark.
       TTTopbar pairs this with fixed inverse labels rather than ordinary reading text. */
    --tt-color-topbar-bg: var(--tt-color-accent);

    /* Issue #3894: Preserve Light's resting burger hover and brighter menu hover
       independently of primary actions; both become quiet dark-header highlights. */
    --tt-color-topbar-control-hover: var(--tt-color-accent);
    --tt-color-topbar-menu-hover: #3f82c1;

    /* Issue #3894: Menu separators sit on colored chrome, where ordinary soft
       panel edges can disappear. Preserve Light and use a stronger neutral Dark edge. */
    --tt-color-topbar-separator: var(--tt-color-border-soft);

    /* Issue #3894: Static section bands/markers have no selected-tab/action state.
       Preserve their Light blue while allowing neutral Dark hierarchy independently. */
    --tt-color-section-heading-bg: var(--tt-color-selected-bg);
    --tt-color-section-marker: var(--tt-color-accent);

    /* Issue #3894: Legacy pure-black reading text and edges need Light parity without
       changing fixed black masks/shadows. Tooltips, paginator text and legacy selects use these roles. */
    --tt-color-legacy-text: var(--tt-color-black);
    --tt-color-legacy-border: var(--tt-color-black);

    /* Issue #3894: Navigation-blue reading labels share the Light chrome shade but
       brighten independently in Dark. Tabs, section headings and picker icons need readable labels. */
    --tt-color-navigation-text: var(--tt-color-navigation-bg);

    /* Issue #3894: Small accent labels/icons cannot read in solid action/selection fills
       on black. Retain each released Light foreground; Dark brightens only reading copy. */
    --tt-color-accent-reading: var(--tt-color-accent);
    --tt-color-accent-hover-reading: var(--tt-color-accent-hover);
    --tt-color-accent-selection-reading: var(--tt-color-accent-selection);

    /* Issue #3894: Status indicators that previously read in solid action colors need
       independent foregrounds on dark cards. Tags, password checks and compact badge icons
       preserve their exact Light hues without recoloring solid controls or business markers. */
    --tt-color-success-reading: var(--tt-color-success);
    --tt-color-danger-reading: var(--tt-color-danger);
    --tt-color-warning-reading: var(--tt-color-warning-action);
    --tt-color-info-reading: var(--tt-color-info);

    /* Black supplies true-black masks, neutral shadows and deliberately black legacy foregrounds. Retain its endpoint instead of substituting a blue shadow; compare with the softer text-strong and white canvas.
       Primary examples: TTPlainLanguageSummary, TTOverlayPanel, TTAwesomeBoxSide. */
    --tt-color-black: #000000;

    /* Strong reading text and dark chrome need a distinct darkest blue-neutral. Keep the existing main UI strong-text baseline; it anchors heading and muted copy on white or subtle surfaces.
       Primary examples: TTInsideEditorSection, TTFilePicker, TTDropdown. */
    --tt-color-text-strong: #142638;

    /* Headings need emphasis without becoming the darkest chrome. Keep the established shared-modal heading shade; it appears above text-muted copy and next to text-strong titles on light surfaces.
       Primary examples: TTDatePicker, TTAwesomeBox, ExpenseEditFooter. */
    --tt-color-heading: #263645;

    /* Field and compact-section labels identify values without using the action blue. Keep the established edit-label foreground; it pairs with field-label-bg, control-text and focused label washes.
       Primary examples: TTTimePicker, TTTagInput, TTDatePicker. */
    --tt-color-field-label-text: #30445a;

    /* Ordinary body and legacy-widget copy needs a neutral reading color. Keep the existing application body baseline and absorb nearby charcoal variants; it is normally read on white or surface-subtle beside muted copy.
       Primary examples: TTRichTextEditor, TTFileDropZone, TTDeveloperDebugPanel. */
    --tt-color-text: #3b3b3b;

    /* Editable control content has an independent foreground contract from field labels. Keep the existing picker/input baseline; it sits on white beside control-border and field-label-text, with disabled-text overriding availability.
       Primary examples: TTFeedback, TTAwesomeBoxColumnSelector, TTAvailableBalanceDisplay. */
    --tt-color-control-text: #495057;

    /* Secondary copy, close icons and disabled foreground defaults share a readable blue-gray. Use the established main UI muted baseline instead of each card inventing another gray; it sits below headings on white/subtle surfaces and beside disabled-bg.
       Primary examples: TTTimePicker, TTPlainLanguageSummary, TTPassword. */
    --tt-color-text-muted: #52687b;

    /* Unavailable dates, placeholders and tertiary hints need a lighter tier than ordinary secondary copy. Choose the existing schedule out-of-period foreground; it is seen next to text-muted and light disabled surfaces, not as ordinary essential reading text.
       Primary examples: TTPickerShell, TTFilePicker, TTDatePicker. */
    --tt-color-text-faint: #8b95a1;

    /* Legacy controls and stronger dividers need a neutral edge darker than ordinary soft separators. Retain the legacy widget border baseline; it surrounds white controls beside control-text and ordinary border.
       Primary examples: TTFeedback, TTAwesomeBoxColumnSelector, TTCardList. */
    --tt-color-border-strong: #a9a9a9;

    /* Normal controls and card outlines need one stable light-gray edge. Keep the established control border and consolidate approximate normal borders; it separates white/subtle surfaces and is superseded by focus or status borders.
       Primary examples: TTTimePicker, TTTagInput, TTPickerShell. */
    --tt-color-border: #ced4da;

    /* Low-emphasis card and section separators should stay softer than a control outline. Keep the established soft-border baseline; it appears between white/subtle panels near border and muted headings.
       Primary examples: TTTimePicker, TTPunchImage, TTMapEditor. */
    --tt-color-border-soft: #d7e0e8;

    /* Disabled fields retain their neutral availability edge independently of active controls. Keep the established disabled border rather than introducing a status hue; it pairs with disabled-bg and disabled-text and is removed by View-mode overrides.
       Primary examples: TTInputText, TTPickerShell and TTRadioButton. */
    --tt-color-disabled-border: #d0d0d0;

    /* Field-label backings, quiet panels and alternating rows need a gentle fill beside the white canvas. Keep the established subtle-surface baseline; selected rows use a separate blue/cyan role, and a border shade would make broad stripes too dark. It sits beside white fields, label dividers and surface-highlight.
       Primary examples: TTPickerShell, PunchModeTable, TimeSheetSubGrid and ScheduleMonthBoard. */
    --tt-color-surface-subtle: #f4f5f7;

    /* Light blue washes identify gentle emphasis without the strong selected fill. Keep the existing focus-wash baseline and merge nearby pale blues; it appears with action/focus borders, dark label copy and white controls.
       Primary examples: TTTimePicker, TTTagInput, TTMapEditor. */
    --tt-color-surface-highlight: #eef5fb;

    /* Neutral unavailable backings and quieter inset surfaces need a visible contrast from white. Keep the existing disabled/inset baseline; pair it with disabled-border and muted text while View mode remains transparent.
       Primary examples: TTTagInput, TTSectionHeader, TTPickerShell. */
    --tt-color-surface-muted: #eaeaea;

    /* Light neutral/card hover states must remain distinguishable from their white or subtle rest state. Choose the existing Workflow Summary pale-blue meter tone as the shared hover backing rather than preserving many almost-white hover values; it sits near surface-highlight and accent-border.
       Primary examples: TTPickerShell, TTAwesomeBoxSide, TTAwesomeBox. */
    --tt-color-surface-hover: #e3edf5;

    /* The established TimeTrex brand blue owns ordinary actions, primary fills and selected defaults. Retain the long-standing brand value rather than the one-channel near duplicate; it is seen against white, near accent-hover and pale focus surfaces.
       Primary examples: TTTimePicker, TTRadioButton, TTDatePicker. */
    --tt-color-accent: #32689b;

    /* Dark action hover states and strong links on tinted fills need more contrast than the brand rest state. Choose the established context-action hover blue; it pairs with white labels and follows accent on buttons and navigation.
       Primary examples: TTDatePicker, TTButton, TTAwesomeBoxSide. */
    --tt-color-accent-hover: #2d5e8c;

    /* Link-like emphasis and strong blue focus outlines need a separate role from a solid action fill. Choose the existing shared keyboard-focus blue; it is normally seen on white/light surfaces beside muted text and accent selection.
       Primary examples: TTCard, TTCardList, TTMetricCard. */
    --tt-color-accent-text: #2468a2;

    /* Stronger blue outlines distinguish focused/selected cards from their quiet rest borders. Choose the existing Upload Wizard selected-card outline; it sits between accent-border and brand focus blue around white surfaces.
       Primary examples: TTFilePicker, TTDatePicker, ReportTabbed. */
    --tt-color-accent-border-strong: #7ba1c2;

    /* Focused label dividers and blue-tinted outlines need a light bridge between brand and surface wash. Keep the established focused-divider baseline; it sits between field-focus-bg and white inputs, related to accent and border-soft.
       Primary examples: TTFormulaBuilder, TTAwesomeBoxSide, TTAwesomeBox. */
    --tt-color-accent-border: #bfd4e8;

    /* Selected schedule/grid surfaces need a clearly visible cyan wash independent of status-colored edges. Keep the existing selected-item highlight; pair with dark text and retain red/amber/teal status borders rather than tinting their meaning away.
       Primary examples: TTAwesomeBoxSide, TTAwesomeBox, TTEditorTable. */
    --tt-color-accent-selection: #99e6ff;

    /* Legacy blue gradients and progress highlights need a brighter stop than brand blue. Retain an existing context-menu/progress highlight endpoint; it is used beside accent or accent-text, with dark text or independently owned inverse copy.
       Primary examples: TTAssistant, TTTopbar, TTViewMinTabBar. */
    --tt-color-accent-bright: #57beff;

    /* Navigation chrome has a darker, less saturated blue than primary actions. Keep the existing menu/topbar family baseline; pair it with white/inverse copy and accent-hover rather than ordinary muted text.
       Primary examples: TTSectionHeader, TTPickerShell, TTFormulaBuilder. */
    --tt-color-navigation-bg: #375979;

    /* Issue #3894: TimeSheet pay-period, section and footer headings need a grid
       hierarchy independent of navigation chrome. Preserve their Light blue and
       inverse labels; Dark can lift these bands above black cells and date rows. */
    --tt-color-grid-section-bg: var(--tt-color-navigation-bg);

    /* Bright cyan is retained for inverse-surface status pulses where a dark info edge would disappear. Choose the existing topbar pulse endpoint; it appears beside accent-bright and pale purple animation stops on dark chrome.
       Primary examples: EditRecordsTabbed, SearchAndLayout, TTTopbar. */
    --tt-color-info-bright: #7df9ff;

    /* Bright positive icons need a light green on dark or blue chrome rather than the dark green used for reading text. Retain the existing update-layout icon shade; it sits beside inverse text and action/nav fills, distinct from success-text on pale notices.
       Primary examples: ListLayout, TTDataTable, application. */
    --tt-color-success-bright: #90ee90;

    /* Bright rose retains the inverse-surface status pulse color instead of using a dark reading foreground on dark chrome. Keep the existing topbar rose stop; it appears beside purple-bright, info-bright and accent-bright in the same decorative animation.
       Primary examples: TTTopbar. */
    --tt-color-pink-bright: #ff66c4;

    /* Light purple preserves the categorical/decorative pulse hue on dark chrome. Retain an existing topbar pulse stop instead of replacing purple with blue; it appears beside bright cyan and blue in the same status animation, independently of ordinary action colors.
       Primary examples: TTTopbar. */
    --tt-color-purple-bright: #b388ff;

    /* Informational and scheduled-state copy needs readable dark teal on light status fills. Keep the schedule-board foreground baseline; it pairs with info-bg/info-bg-strong and remains distinct from error or warning text.
       Primary examples: ScheduleDayBoard, ScheduleMonthBoard, ActiveSearchStatus. */
    --tt-color-info-text: #164f63;

    /* Scheduled/info indicators and edges need an identifiable teal distinct from blue selection. Keep the established schedule outline/edge hue; it appears beside info-text, pale info fills and independently cyan selected surfaces.
       Primary examples: TTCard, TTCardList, FormulaBuilderModal. */
    --tt-color-info: #2b8aa5;

    /* Secondary teal emphasis and selected scheduled edges need a darker tier than info. Keep the existing schedule under-edge shade; it is seen next to info and its light fills, preserving stacked selection indicators.
       Primary examples: AttachmentPreview, ScheduleMonthBoard, ActiveSearchStatus. */
    --tt-color-info-strong: #1f6f86;

    /* Primary informational/scheduled fills need a light teal backing readable with info-text. Keep the existing primary scheduled-block fill; pair it with info borders and the darker secondary info-bg-strong.
       Primary examples: TTEditorTable, ScheduleMonthBoard, TTDataTable. */
    --tt-color-info-bg: #dceef5;

    /* Secondary scheduled segments must remain visibly different from their primary segments. Keep the schedule secondary fill; it sits beside info-bg with the same info-text so splitting is visible without inventing another status hue.
       Primary examples: TTMetricCard and ScheduleMonthBoard. */
    --tt-color-info-bg-strong: #c8e4ee;

    /* Informational popovers and schedule boundaries need a subdued teal edge rather than a saturated selection ring. Keep the existing schedule popover border; it surrounds white/info fills beside info-text and info outlines.
       Primary examples: TTAwesomeBox and ScheduleMonthBoard. */
    --tt-color-info-border: #9db8c7;

    /* Solid positive actions and confirmed-state indicators need a green that supports inverse labels. Keep the existing TTButton success baseline; it pairs with white and follows success-hover, distinct from pale positive badges.
       Primary examples: TTTagInput, TTMapEditor, TTFeedback. */
    --tt-color-success: #198754;

    /* Hovered positive actions must darken while keeping their green meaning. Keep the existing TTButton success hover; it is adjacent to success at rest, white labels and success-text on light notices.
       Primary examples: TTFeedback and TTButton. */
    --tt-color-success-hover: #157347;

    /* Strong positive notice copy needs a darker green than compact positive badge copy. Keep the existing About status-message foreground; pair with success-bg on light notices, adjacent to success-text on denser badges.
       Primary examples: TTCard, TTChip, DashletShell. */
    --tt-color-success-text-strong: #1d5b34;

    /* Positive badge and summary copy needs dark green on light positive surfaces. Choose the repeatedly used dashboard positive foreground; it pairs with success-bg and success-border rather than borrowing the solid action fill.
       Primary examples: TTFeedback, QualificationRenewalsPanel, RecruitmentPipelinePanel. */
    --tt-color-success-text: #177245;

    /* Positive notices and badges need a light backing without the visual weight of a solid action. Choose the common existing dashboard success fill; it pairs with success-text and success-border beside neutral cards.
       Primary examples: TTInsideEditorRow, ExpenseEditFooter, TTCard. */
    --tt-color-success-bg: #dff4e8;

    /* Stronger green fills distinguish emphasized positive cells or badge hover from quiet positive notices. Choose the existing dashboard positive-outline shade as the denser positive surface; it appears next to success-bg with dark positive text, not white action labels.
       Primary examples: TTTagInput, ExpenseEditFooter, TTMetricCard. */
    --tt-color-success-bg-strong: #badfca;

    /* Positive-card outlines need a softer green than solid confirmation actions. Keep the existing camera/positive-status edge baseline; it pairs with success-bg or white and success-text.
       Primary examples: AboutView, UploadTTWizard. */
    --tt-color-success-border: #9bc9ae;

    /* Solid destructive actions and error indicators need a clear red distinct from warning amber. Keep the existing TTButton danger baseline; it pairs with white labels, danger-hover and pale error notices.
       Primary examples: TTTagInput, TTRichTextEditor, TTInputText. */
    --tt-color-danger: #dc3545;

    /* Hovered destructive actions need a darker red rest/hover distinction. Keep the existing TTButton danger hover; it follows danger and stays legible with white, unlike soft error-background roles.
       Primary examples: TTButton, EditRecordsTabbed, ReportTabbed. */
    --tt-color-danger-hover: #bb2d3b;

    /* Error and absence copy needs dark red on pale red surfaces. Keep the established schedule absence foreground; it pairs with danger-bg/strong/secondary and remains independent of blue selection washes.
       Primary examples: TTPlainLanguageSummary, TTMapEditor, TTLocationEditor. */
    --tt-color-danger-text: #8f241c;

    /* Quiet error notices need a pale red backing separate from solid destructive controls. Keep the existing soft MessageBox error fill; it pairs with danger-text and danger-border near neutral dialog surfaces.
       Primary examples: TTAwesomeBox, ExpenseEditFooter, AttachmentPreview. */
    --tt-color-danger-bg: #fff4f2;

    /* Primary absence/error blocks need a more visible red fill than a quiet notice. Keep the primary schedule absence baseline; it is shown beside danger-bg-secondary with the same danger-text.
       Primary examples: TTTagInput, TTInsideEditorRow, TTMenuOverlay. */
    --tt-color-danger-bg-strong: #f7d7d4;

    /* Secondary absence segments must remain distinguishable from primary segments. Keep the existing schedule secondary absence fill; it sits beside danger-bg-strong and shares danger-text without losing split-shift hierarchy.
       Primary examples: TTAwesomeBox, ExpenseEditFooter, EditRecordsTabbed. */
    --tt-color-danger-bg-secondary: #f0c4bf;

    /* Soft error cards need a visible red edge without the full weight of a destructive action. Keep the shared soft-error MessageBox border; it surrounds danger-bg with danger-text and can coexist with cyan selection surfaces.
       Primary examples: TTInputText, TTDatePicker, TTCurrencyInput. */
    --tt-color-danger-border: #df877c;

    /* Strong caution notice copy needs a darker brown than compact open-shift labels. Keep the existing password-reset warning foreground; it pairs with warning-bg and neutral light dialogs, alongside warning-text on denser schedule fills.
       Primary examples: TTPasswordResetModal, MigratePayCodesModal, ScheduleDayBoard. */
    --tt-color-warning-text-strong: #4f3a12;

    /* Warning/open-state copy needs dark amber-brown on pale yellow. Keep the existing schedule open-shift foreground; it pairs with warning-bg/strong and warning-border, distinct from error red.
       Primary examples: TTFormulaBuilder, MessageBox, UserNeedsActionPanel. */
    --tt-color-warning-text: #6f5114;

    /* Warnings and primary open shifts need a pale amber backing readable with dark copy. Keep the primary schedule open-fill baseline; it is adjacent to white cards and the stronger secondary warning-bg-strong.
       Primary examples: TTFormulaBuilder, RequestAuthorizationOverlappingShifts, MessageBox. */
    --tt-color-warning-bg: #fff3cc;

    /* Secondary open segments and stronger caution surfaces need a denser amber than quiet warning copy. Keep the schedule secondary open fill; it pairs with warning-text and sits beside warning-bg to preserve split-shift hierarchy.
       Primary examples: TTTimePicker, TTInputText, TTDatePicker. */
    --tt-color-warning-bg-strong: #f5dfa3;

    /* Soft warning cards need an amber edge quieter than a saturated caution indicator. Keep the existing soft MessageBox warning border; it surrounds warning-bg with warning-text near neutral dialog surfaces.
       Primary examples: TTFormulaBuilder, MessageBox, UserNeedsActionPanel. */
    --tt-color-warning-border: #e0c787;

    /* High-visibility caution indicators and legacy warning edges need orange rather than destructive red. Keep the existing warning-box edge hue; it is seen beside pale amber fills and dark warning copy, not used as ordinary text on white.
       Primary examples: TTTimePicker, TTInputText, TTFeedback. */
    --tt-color-warning: #ff9000;

    /* Dense amber badges or actions need a darker value for readable light labels. Choose the repeated dashboard amber foreground/dense-state baseline; it is related to warning-text and brighter warning indicators on light cards.
       Primary examples: TTCard, TTCardList, TTChip. */
    --tt-color-warning-action: #9b6000;

    /* Purple formula categories need a recognizable accent independent of actions or status. Retain the existing FormulaBuilderModal category purple; it appears on light formula surfaces beside pink category markers and blue actions, related to the lighter purple-bright used on dark topbar chrome.
       Primary examples: FormulaBuilderModal. */
    --tt-color-purple: #7658c9;

    /* Pink formula categories need a rose accent distinguishable from errors and purple categories. Retain the existing FormulaBuilderModal category rose; it appears on light formula surfaces beside purple markers, related to pink-bright which supplies the lighter rose pulse on dark topbar chrome.
       Primary examples: FormulaBuilderModal. */
    --tt-color-pink: #c13c8f;

    /* Ordinary action foregrounds retain their own contract while sharing the brand today. The established action blue is chosen through accent; it appears beside text-muted and white surfaces.
       Primary examples: TTContextButton, TTTab and Request Authorization actions. */
    --tt-color-action: var(--tt-color-accent);

    /* Primary fills share the established brand but retain an independently themeable action role. Use accent with white labels, adjacent to accent-hover.
       Primary examples: TTButton primary, login actions and wizard actions. */
    --tt-color-primary-action: var(--tt-color-accent);

    /* Strong selected-tab/navigation fills share the brand while remaining independent from action text. Use accent with white copy, alongside pale selected schedule surfaces.
       Primary examples: TTTab active tab, menu selection and date/time controls. */
    --tt-color-selected-bg: var(--tt-color-accent);

    /* Keyboard/input focus retains a dedicated role while sharing brand blue. Use accent around white controls, next to field-focus-bg and its divider.
       Primary examples: TTPickerShell, TTButton and Request Authorization focus. */
    --tt-color-focus: var(--tt-color-accent);

    /* Active control edges retain a dedicated default and caller override contract. Choose the canonical normal border, beside white control surfaces and focus rings.
       Primary examples: TTPickerShell, TTInputText and AwesomeBox inputs. */
    --tt-color-control-border: var(--tt-color-border);

    /* Normal label/value separators need the same neutral edge as controls but a separate field role. Choose border beside field-label-bg and white values; focused dividers remain bluer.
       Primary examples: TTFormField, edit labels and Request Authorization. */
    --tt-color-field-label-divider: var(--tt-color-border);

    /* Modal/card shell edges share the normal border while retaining shell ownership. Choose border against white or subtle surfaces, near headings and footer actions.
       Primary examples: TTModalVisuals, EditRecordsTabbed and dialogs. */
    --tt-color-shell-border: var(--tt-color-border);

    /* Disabled foregrounds, including selected radio dots, retain availability ownership while sharing muted copy today. Choose text-muted alongside disabled-bg/border; View mode explicitly restores normal copy.
       Primary examples: TTInputText, TTRadioButton and TTFormField. */
    --tt-color-disabled-text: var(--tt-color-text-muted);

    /* Ordinary label backing remains independently themeable even though it shares the quiet surface. Choose surface-subtle next to white controls and label-divider.
       Primary examples: TTFormField, edit label panels and Request Authorization. */
    --tt-color-field-label-bg: var(--tt-color-surface-subtle);

    /* Focused label backing must remain distinct from the normal quiet label surface. Choose the existing light blue highlight beside field-focus-divider and white focused controls.
       Primary examples: TTFormField, TTInputText focus and Request Authorization. */
    --tt-color-field-focus-bg: var(--tt-color-surface-highlight);

    /* Focused label dividers retain an independent field role while sharing the established blue edge. Choose accent-border beside field-focus-bg and normal border.
       Primary examples: TTFormField, picker focus and Request Authorization. */
    --tt-color-field-focus-divider: var(--tt-color-accent-border);

    /* Unavailable field backings retain availability ownership while sharing the neutral inset surface. Choose surface-muted with disabled-border/text; View mode keeps its transparent override.
       Primary examples: TTInputText, TTRadioButton and disabled employee fields. */
    --tt-color-disabled-bg: var(--tt-color-surface-muted);

    /* Dark neutral chrome retains its own surface role while sharing the established heading shade. Choose heading with inverse-text; it sits beside navigation-bg and dark text-strong rather than a pale card wash.
       Primary examples: Legacy dashlet action bars, tooltip chrome and dark overlays. */
    --tt-color-surface-dark: var(--tt-color-heading);

    /* Inverse copy is an independent semantic role sharing opaque white. Keep white for dark chrome/solid actions, beside navigation-bg, accent and success/danger fills.
       Primary examples: TTTopbar, menu labels and TTButton solid variants. */
    --tt-color-inverse-text: var(--tt-color-white);

    /* State and chart roles retain meaningful distinctions that neutral consolidation cannot own. */
    /* Selected day headers need stronger cyan than selected cells. Retain the original TimeSheet header value to keep the active day conspicuous beside accent-selection cells and subtle alternating rows; info-border is an edge, not this selection fill. Primary examples: TimeSheetView selected-date header. */
    --tt-color-selection-header-bg: #33ccff;

    /* Pending pay periods need a conspicuous yellow state beside blue open-period and red closed-period headers. Retain the original pending value rather than the subdued warning-border; dark body text sits on this fill. Primary examples: TimeSheetView pending pay-period headers. */
    --tt-color-pending-period-bg: #eed614;

    /* Existing notes need a vivid blue presence cue distinct from ordinary action blue and empty-note controls. Retain the original note marker value for tiny dots and the note-bearing control beside white cells and cyan selected cells. Primary examples: ManualModeCellNote editable and read-only note dots. */
    --tt-color-note-indicator: #003dff;

    /* Disabled blue actions need a muted fill distinguishable from enabled accent and hover fills. Retain the Assistant Send baseline rather than accent-bright; white labels and the disabled-action-border remain visible under the existing disabled opacity. Primary examples: TTAssistant disabled Send. */
    --tt-color-disabled-action-bg: #96afc8;

    /* Disabled blue actions keep a muted edge independently of focused controls. Retain the original Send edge beside disabled-action-bg and white labels; accent-border-strong belongs to active emphasis. Primary examples: TTAssistant disabled Send. */
    --tt-color-disabled-action-border: #88a3bf;

    /* An active search needs a cyan status wash distinct from neutral panels and selected rows. Retain its original cyan backing beside search-status-border/icon, info-text and white list controls. Primary examples: ActiveSearchStatus active-filter summary. */
    --tt-color-search-status-bg: #ddfbff;

    /* The active-search status needs a cyan edge matching its own wash rather than a scheduled-info fill. Retain the original outline beside search-status-bg and the brighter icon so the summary remains recognizable on white. Primary examples: ActiveSearchStatus active-filter summary. */
    --tt-color-search-status-border: #86ecff;

    /* Active-search status icons need a saturated cyan cue on the pale cyan summary. Retain the original icon hue beside search-status-bg/border and dark info-text, independently of scheduled-state teal. Primary examples: ActiveSearchStatus search icon. */
    --tt-color-search-status-icon: #00bcd9;

    /* Progress fill gradients need a bright blue endpoint rather than informational teal. Retain the original endpoint beside accent-bright and the neutral progress track; keep the existing gradient positions and native engine rules. Primary examples: application native WebKit and Firefox progress fills. */
    --tt-color-progress-blue: #12a3ff;

    /* Quiet positive metrics need a green tint distinguishable from ordinary gray without the denser success-bg badge emphasis. Retain the original pale-success baseline beside success borders, dark text and neutral neighboring metrics. Primary examples: WorkflowSummaryPanel success metrics/items and UpcomingSchedulePanelView working metric. */
    --tt-color-success-bg-subtle: #f4fbf7;

    /* Quiet open-shift cells need a gentle amber rest fill independent of the stronger warning-bg split-shift segments. Retain the original rest baseline beside warning-bg-hover and dark warning text. Primary examples: ScheduleWeekBoard open-shift cells and UpcomingSchedulePanelView open metric. */
    --tt-color-warning-bg-subtle: #fffaf0;

    /* Open-shift hover must visibly differ from its quiet rest fill without becoming a dense caution block. Retain the original hover baseline beside warning-bg-subtle and dark warning text. Primary examples: ScheduleWeekBoard hovered open-shift cells. */
    --tt-color-warning-bg-hover: #fff4dc;

    /* High severity needs an orange wash distinct from medium yellow and critical red. Retain the original high-severity baseline beside severity-high-text/border and medium/critical peers; do not merge severity tiers. Primary examples: UserExceptionsPanel high badge and WorkflowSummaryPanel high-severity metrics. */
    --tt-color-severity-high-bg: #ffeadb;

    /* High-severity badge copy needs dark orange on its orange wash, independently of chart markers. Retain the original foreground beside severity-high-bg and the yellower medium text; marker values retain chart ownership. Primary examples: UserExceptionsPanel high badge. */
    --tt-color-severity-high-text: #a84e08;

    /* High-severity metrics need a soft orange edge distinct from medium yellow. Retain the original edge beside severity-high-bg and medium/critical borders so the severity progression survives. Primary examples: WorkflowSummaryPanel high-severity metrics. */
    --tt-color-severity-high-border: #f2c097;

    /* Medium severity needs a yellow wash distinguishable from the high orange tier. Retain the original medium baseline beside severity-medium-text/border and high/critical peers rather than general warning-bg. Primary examples: UserExceptionsPanel medium badge and WorkflowSummaryPanel medium-severity metrics. */
    --tt-color-severity-medium-bg: #fff1cc;

    /* Medium badge copy needs dark yellow-brown distinct from the high orange text. Retain the original foreground on severity-medium-bg; chart markers remain separate values paired with their plotted colors. Primary examples: UserExceptionsPanel medium badge. */
    --tt-color-severity-medium-text: #856100;

    /* Medium-severity metrics need a soft yellow edge distinct from high orange. Retain the original border beside severity-medium-bg and high/critical border tiers. Primary examples: WorkflowSummaryPanel medium-severity metrics. */
    --tt-color-severity-medium-border: #e9cf87;

    /* Net-pay legends must exactly match their unchanged plotted green. Retain the chart-owned baseline beside deductions/employer markers and white chart cards; success-hover is an unrelated action state. Primary examples: PayrollPayPeriodComparisonChart and UserPayHistoryPanel net legends. */
    --tt-color-chart-net: #1f7a55;

    /* Deduction legends must exactly match their unchanged plotted amber. Retain the chart-owned baseline beside net/employer and average markers rather than a generic warning action. Primary examples: PayrollPayPeriodComparisonChart and UserPayHistoryPanel deduction legends. */
    --tt-color-chart-deductions: #b47b08;

    /* Employer-cost legends must exactly match their plotted blue. Retain this chart baseline beside net/deduction markers; chart-worked is a separate unchanged programmatic contract with a one-channel difference. Primary examples: PayrollPayPeriodComparisonChart employer legend. */
    --tt-color-chart-employer: #2f6fa6;

    /* Average-line legends must match the unchanged plotted neutral gray-blue. Retain the chart baseline beside colored series and range edges; a focus-border blue would falsely recolor the legend. Primary examples: HistoryPanel, CompanyWorkTimeHistoryPanel, UserWorkTimeHistoryPanel, ExceptionHistoryPanel, UserPayHistoryPanel and PayrollPayPeriodComparisonChart. */
    --tt-color-chart-average: #718096;

    /* Range-marker legend edges must match the plotted translucent gray-blue. Retain the original base with alpha at the use site beside chart-average and series markers; ordinary text-muted is independently themeable. Primary examples: PayrollPayPeriodComparisonChart range legend. */
    --tt-color-chart-range: #536471;

    /* Worked-time and low-exception legend markers must match their unchanged programmatic blue. Retain this exact baseline beside remaining/over-schedule and high/medium/critical peers; keep chart-employer separate while the programmatic owners differ by one channel. Primary examples: UserPayPeriodSummaryPanel worked marker and UserExceptionsPanel low marker. */
    --tt-color-chart-worked: #2f6fa7;

    /* Remaining-time markers must match the unchanged meter remainder wash. Retain its blue-neutral baseline beside chart-worked and over-schedule; ordinary disabled gray would disagree with the meter. Primary examples: UserPayPeriodSummaryPanel remaining marker. */
    --tt-color-chart-remaining: #dfe8ef;

    /* Over-schedule markers must match the unchanged amber meter segment. Retain the programmatic baseline beside worked/remaining; generic warning-action does not own the plot. Primary examples: UserPayPeriodSummaryPanel over-schedule marker. */
    --tt-color-chart-over-schedule: #a66a08;

    /* Authorized-request legend markers must match the unchanged donut green. Retain the plotted baseline beside declined and pending labels rather than a generic success action fill. Primary examples: UserRequestsPanel authorized marker. */
    --tt-color-chart-authorized: #2b8a64;

    /* Declined-request and critical-exception markers share the exact plotted red today. Retain this business-chart baseline beside authorized or high/medium/low markers; danger-hover is an action state, not the plotted contract. Primary examples: UserRequestsPanel declined marker and UserExceptionsPanel critical marker. */
    --tt-color-chart-negative: #c23636;

    /* High-exception markers must retain the plotted orange distinct from medium yellow. Keep the original donut baseline beside chart-severity-medium and critical/low markers; badge text and fill have separate contrast roles. Primary examples: UserExceptionsPanel high-severity legend. */
    --tt-color-chart-severity-high: #d56a10;

    /* Medium-exception markers must retain the plotted yellow-brown distinct from high orange. Keep the original donut baseline beside chart-severity-high and critical/low markers, independently of badge text and fills. Primary examples: UserExceptionsPanel medium-severity legend. */
    --tt-color-chart-severity-medium: #a67c08;

    /* Negative-feedback text retains the same readable darker amber at rest and hover. Keep the original foreground beside the brighter warning edge and pale hover wash; it also supplies the existing darker hover-border value through its own alias. Primary examples: TTFeedback negative feedback controls and matching legacy application rules. */
    --tt-color-feedback-negative-text: #de7e00;

    /* Negative-feedback hover/focus needs a darker border than the resting warning edge. Share the original foreground value today while retaining independent hover-edge ownership; it sits beside the pale warning hover wash and brighter rest border. Primary examples: TTFeedback negative feedback controls and matching legacy application rules. */
    --tt-color-feedback-negative-hover-border: var(--tt-color-feedback-negative-text);

    /* The destination pane in the transfer picker needs its established vivid green directional cue beside the red source pane. Retain the original right-pane highlight rather than the much darker success-action green; selected rows keep their separate cyan fill. Primary examples: TTAwesomeBox transferred/right pane and single-mode destination table. */
    --tt-color-transfer-destination-border: #00ff00;

    /* Drop instructions need their established bright blue attention fill beside document lists. Retain the original banner blue rather than brand-action blue; pair with text-strong for readable copy and the existing action-blue edge. Primary examples: Documents drag/drop instruction banner. */
    --tt-color-drop-instruction-bg: #2196f3;

    /* Download actions need a blue backing distinguishable from neutral disabled panels. Retain the original Assistant action wash beside action text and white message surfaces, independent of surface-muted availability styling. Primary examples: TTAssistant download action. */
    --tt-color-action-bg: #d7e8fb;

    /* Ordinary open-shift month summaries need their original light amber backing distinct from out-of-period and populated summaries. Retain the baseline beside open-summary-outside-bg/count-bg and dark warning copy. Primary examples: ScheduleMonthBoard open summary header and cells. */
    --tt-color-open-summary-bg: #fff8e6;

    /* Out-of-period open summaries need a quieter backing than in-period summaries. Retain the original muted amber beside open-summary-bg/count-bg and the unavailable-date text cue. Primary examples: ScheduleMonthBoard out-of-period open summary cells. */
    --tt-color-open-summary-outside-bg: #f4edd8;

    /* Populated open summaries need a stronger amber fill than empty summaries. Retain the original count baseline beside open-summary-bg/outside-bg and the count underline; do not collapse those states. Primary examples: ScheduleMonthBoard open summary cells with counts. */
    --tt-color-open-summary-count-bg: #fff1ce;

}

/* Issue #3894: The main document resolves Light/Dark before styles load. Fixed endpoints,
   categorical/chart markers and business colors retain their original contracts. */
:root[data-tt-theme="light"] { color-scheme: light; }
:root[data-tt-theme="dark"] {
    /* Issue #3911: Lifted charcoal login keeps its frame visible on the night photo.
       The header follows navigation blue; raised inputs and stronger edges separate
       editable controls from the #25292e form without changing the photograph/halo. */
    --tt-color-login-frame: #515963;
    --tt-color-login-halo: #929292;
    --tt-color-login-header-bg: var(--tt-color-navigation-bg);
    --tt-color-login-header-border: var(--tt-color-border-strong);
    --tt-color-login-control-bg: var(--tt-color-control-bg);
    --tt-color-login-control-border: var(--tt-color-border-strong);
    /* Issue #3911: Generated reports inherit raised headers and charcoal stripes,
       paired with ordinary reading text rather than their fixed print endpoints. */
    --tt-color-report-header-bg: var(--tt-color-surface-muted);
    --tt-color-report-row-bg: var(--tt-color-surface-subtle);
    color-scheme: dark;
    /* Issue #3911: Approved Lifted charcoal replaces the pure-black shared canvas
       with #25292e. Tables, cards and modal shells share this role; raised #3b424b
       editable controls stay distinct from the #30353c stripes/quiet panel faces. */
    --tt-color-surface: #25292e;
    --tt-color-control-bg: #3b424b;
    /* Issue #3911: Header/navigation chrome uses the approved quiet #283f54 blue
       with fixed inverse labels. Its lifted blue hover stays distinct from both
       the resting header and solid brand-action fills; TTTopbar owns these pairs. */
    --tt-color-topbar-bg: #283f54;
    --tt-color-topbar-control-hover: #3c5369;
    --tt-color-topbar-menu-hover: #3c5369;
    /* Issue #3894: Separate structural rules from the gray menu face and action fills. */
    --tt-color-topbar-separator: var(--tt-color-border-strong);
    --tt-color-section-heading-bg: var(--tt-color-grid-section-bg);
    --tt-color-section-marker: var(--tt-color-border-strong);
    /* Issue #3911: Report title/frame contrast belongs to neutral chrome, not
       selection. The raised title and stronger edge frame the lighter reading body. */
    --tt-color-report-window-bg: #3b424b;
    --tt-color-report-window-border: var(--tt-color-border-strong);
    --tt-color-shadow: #000000;
    /* Issue #3911: Lift neutral depth as a family: inverse tooltips/quiet stripes
       use #30353c above the canvas, date/disabled faces use #353b43 below raised
       controls, focus washes stay blue, and hover brightens rather than blackens.
       Primary pairs: TTPickerShell, TTDataTable, TTModalVisuals and TimeSheet grids. */
    --tt-color-inverse-surface: #30353c;
    --tt-color-surface-subtle: #30353c;
    --tt-color-surface-muted: #353b43;
    --tt-color-surface-highlight: #35475a;
    --tt-color-surface-hover: #434b55;
    --tt-color-surface-dark: #3b424b;
    --tt-color-navigation-bg: #283f54;

    /* Issue #3911: Raised #3b424b section/picker bands retain inverse-white
       labels above charcoal cells, stripes and quieter date rows. TimeSheet
       pay-period/accumulated/footer bands and AwesomeBox frames share this chrome. */
    --tt-color-grid-section-bg: #3b424b;
    --tt-color-picker-panel-bg: var(--tt-color-grid-section-bg);
    --tt-color-picker-panel-shadow: var(--tt-color-black);
    /* Issue #3911: OPEN shift cards remain golden and brighter than the amber
       count row (#55472d), keeping unassigned work distinct from neutral cells. */
    --tt-color-schedule-open-card-bg: #65532d;

    /* Issue #3911: Cool off-white #edf0f4 values/body copy and #bdc6d1 secondary
       copy match Lifted charcoal while headings keep a small emphasis tier.
       Picker labels, editable values and table hints must read on raised faces;
       unavailable/tertiary hints retain a separate quieter #a4afbc foreground. */
    --tt-color-text-strong: #f4f6f8;
    --tt-color-heading: #f4f6f8;
    --tt-color-field-label-text: #bdc6d1;
    --tt-color-text: #edf0f4;
    --tt-color-control-text: #edf0f4;
    --tt-color-legacy-text: #edf0f4;
    --tt-color-navigation-text: #bdc6d1;
    --tt-color-text-muted: #bdc6d1;
    --tt-color-text-faint: #a4afbc;

    /* Issue #3911: Approved #515963 ordinary edges separate lifted surfaces;
       #697481 strong outlines stay visible around raised inputs/login controls,
       #414851 dividers stay quiet, and #484f59 disabled edges keep availability
       separate from active/focused TTPickerShell and legacy control borders. */
    --tt-color-legacy-border: #697481;
    --tt-color-border-strong: #697481;
    --tt-color-border: #515963;
    --tt-color-border-soft: #414851;
    --tt-color-disabled-border: #484f59;

    /* Issue #3894: Dark appearance keeps brand-action fill independent
       from pale blue reading/focus cues; Light retains its released palette. */
    --tt-color-accent: #2b5f91;

    /* Issue #3894: Actions/focus/selection: keep solid brand fills and white labels; reading links and focus outlines brighten independently, cyan selection stays distinct from teal status. */
    --tt-color-accent-hover: #345c84;
    /* Issue #3911: Approved pale-blue #91c8fa links/focus cues read on the lifted
       canvas and controls without replacing solid brand fills or inverse labels. */
    --tt-color-accent-text: #91c8fa;
    --tt-color-accent-reading: var(--tt-color-accent-text);
    --tt-color-accent-hover-reading: var(--tt-color-accent-text);
    --tt-color-accent-selection-reading: var(--tt-color-accent-text);
    --tt-color-action: #91c8fa;
    --tt-color-focus: #91c8fa;
    /* Issue #3911: Blue edges accompany focus washes, while approved #3c5369
       selected rows/cells remain distinct from charcoal stripes and teal hover.
       Selected-day headers keep a stronger cyan-blue tier. Disabled action faces
       stay quieter than enabled blue actions; TTAssistant and TimeSheet use these pairs. */
    --tt-color-accent-border: #536d87;
    --tt-color-accent-border-strong: #789bbd;
    --tt-color-accent-selection: #3c5369;
    --tt-color-selection-header-bg: #446985;
    --tt-color-disabled-action-bg: #30353c;
    --tt-color-disabled-action-border: #515963;
    --tt-color-action-bg: #35475a;

    /* Issue #3911: Lift positive notice fills above near-black while retaining
       green hue, quiet/strong tiers and pale-green copy. MessageBox/schedule cards
       use these pairs; solid success controls and chart markers retain their values. */
    --tt-color-success-reading: #8bd8ad;
    --tt-color-success-text: #8bd8ad;
    --tt-color-success-text-strong: #a8e5bf;
    --tt-color-success-bg: #2e4238;
    --tt-color-success-bg-strong: #375746;
    --tt-color-success-bg-subtle: #2b3731;
    --tt-color-success-border: #5a806b;

    /* Issue #3911: Lift red notice/absence faces without losing their primary,
       strong and secondary tiers. Pale-red copy and rose edges keep MessageBox
       errors and ScheduleMonthBoard absence segments distinct from amber warnings. */
    --tt-color-danger-reading: #ffa49c;
    --tt-color-danger-text: #ffa49c;
    --tt-color-danger-bg: #463136;
    --tt-color-danger-bg-strong: #57393f;
    --tt-color-danger-bg-secondary: #62414a;
    --tt-color-danger-border: #a66d78;

    /* Issue #3911: Amber warnings/OPEN summaries lift with the canvas, keeping
       rest, hover, count/emphasized and unavailable-date faces separate. Pale amber
       text and golden edges pair with ScheduleMonthBoard and warning notices. */
    --tt-color-warning-reading: #edce8c;
    --tt-color-warning-text: #edce8c;
    --tt-color-warning-text-strong: #f2dba9;
    --tt-color-warning-bg: #443c2a;
    --tt-color-warning-bg-strong: #55472d;
    /* Issue #3911: This amber edge also fills TTTopbar's Sandbox Mode tab;
       #7e6a43 lifts notice edges while retaining readable heading-colored tab text. */
    --tt-color-warning-border: #7e6a43;
    --tt-color-warning-bg-subtle: #35332a;
    --tt-color-warning-bg-hover: #4d422d;
    --tt-color-open-summary-bg: #443c2a;
    --tt-color-open-summary-outside-bg: #35332a;
    --tt-color-open-summary-count-bg: #55472d;
    /* Issue #3911: TTFeedback's negative action reads on raised control-bg at rest.
       Lighter orange #f4b45e retains its warning meaning and readable text there;
       feedback-negative-hover-border follows this role through its existing alias. */
    --tt-color-feedback-negative-text: #f4b45e;

    /* Issue #3911: Teal info also owns TTDataTable hover; lift it above the canvas
       so hovering no longer restores a near-black row. Strong scheduled segments,
       selected blue cells and brighter ActiveSearchStatus summaries stay separate,
       paired with existing pale-teal copy and lifted teal edges. */
    --tt-color-info-reading: #8cdbed;
    --tt-color-info-text: #8cdbed;
    --tt-color-info-bg: #2d424b;
    --tt-color-info-bg-strong: #355564;
    --tt-color-info-border: #577b89;
    /* Issue #3911: Strong teal also labels the payroll context's +N more chip
       on surface-highlight. Lift to #75bfd3 for small-text contrast while keeping
       it quieter than the pale info-reading foreground and distinct from selection. */
    --tt-color-info-strong: #75bfd3;
    --tt-color-search-status-bg: #304e55;
    --tt-color-search-status-border: #668d95;

    /* Issue #3911: Lift severity badge faces/edges with the neutral panels while
       high remains orange and medium yellow. Existing pale reading colors and
       plotted category markers retain their independent UserExceptionsPanel contracts. */
    --tt-color-severity-high-bg: #4b372b;
    --tt-color-severity-high-text: #ffc194;
    --tt-color-severity-high-border: #976b49;
    --tt-color-severity-medium-bg: #47402a;
    --tt-color-severity-medium-text: #eed48a;
    --tt-color-severity-medium-border: #8d7a48;

}