:root {
    /* ─── Colors: Brand ─────────────────────────────────────────── */
    --color-primary:            #4912ff;
    --color-primary-hover:      #3a0ecc;
    --color-primary-disabled:   #8ba3ff;
    --color-primary-subtle:     rgba(73, 18, 255, 0.05);
    --color-on-primary:         #f5f5f5;

    /* ─── Colors: Semantic ──────────────────────────────────────── */
    --color-danger:             #df044a;
    --color-success:            #009951;

    /* ─── Colors: Background ────────────────────────────────────── */
    --color-bg:                 #ffffff;
    --color-bg-secondary:       #f5f5f5;
    --color-bg-map-loading:     #e8e3dc;
    --color-bg-skeleton-highlight: #e8e8e8;
    --color-bg-glass:           rgba(255, 255, 255, 0.34);
    --color-overlay:            rgba(0, 0, 0, 0.4);

    /* ─── Colors: Border ────────────────────────────────────────── */
    --color-border:             #d9d9d9;

    /* ─── Colors: Text ──────────────────────────────────────────── */
    --color-text-primary:       #1a1a1a;
    --color-text-secondary:     #1e1e1e;
    --color-text-muted:         #49454f;
    --color-text-tertiary:      #777777;
    --color-text-placeholder:   #b3b3b3;
    --color-text-accent:        #4912ff;

    /* ─── Spacing ───────────────────────────────────────────────── */
    --spacing-xs:   4px;
    --spacing-sm:   8px;
    --spacing-md:   12px;
    --spacing-lg:   16px;
    --spacing-xl:   20px;
    --spacing-2xl:  24px;
    --spacing-3xl:  32px;
    --spacing-4xl:  40px;

    /* ─── Border Radius ─────────────────────────────────────────── */
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-full:  9999px;
    --radius-xs:    4px;

    /* ─── Borders ───────────────────────────────────────────────── */
    --border-width-default: 1px;
    --border-width-strong:  2px;
    --border-default:       var(--border-width-default) solid var(--color-border);
    --border-primary:       var(--border-width-default) solid var(--color-primary);

    /* ─── Typography: Font Family ───────────────────────────────── */
    --font-family:  'Inter', sans-serif;

    /* ─── Typography: Font Sizes ────────────────────────────────── */
    --font-size-xs:  12px;
    --font-size-sm:  14px;
    --font-size-md:  16px;
    --font-size-lg:  24px;
    --font-size-xl:  28px;

    /* ─── Typography: Font Weights ──────────────────────────────── */
    --font-weight-regular:   400;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    /* ─── Typography: Line Heights ──────────────────────────────── */
    --line-height-tight:    1.2;
    --line-height-normal:   1.4;

    /* ─── Typography: Letter Spacing ────────────────────────────── */
    --tracking-tight:   -0.48px;
    --tracking-wide:     0.25px;
    --tracking-none:     0;

    /* ─── Shadows ───────────────────────────────────────────────── */
    --shadow-nav:    0px 4px 2px rgba(12, 12, 13, 0.05), 0px 16px 8px rgba(12, 12, 13, 0.10);
    --shadow-footer: 0px 4px 2px rgba(12, 12, 13, 0.05), 0px 16px 8px rgba(12, 12, 13, 0.10);
    --shadow-segmented-control: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-floating-panel:    0 4px 20px rgba(0, 0, 0, 0.14);
    --shadow-action-footer:     0 -2px 12px rgba(0, 0, 0, 0.08);
    --shadow-chip-selected:      0 8px 18px rgba(73, 18, 255, 0.24);

    /* ─── Transitions ───────────────────────────────────────────── */
    --transition-fast:    150ms ease;
    --transition-normal:  250ms ease;

    /* ─── Opacity ───────────────────────────────────────────────── */
    --opacity-disabled: 0.5;

    /* ─── Icon Sizes ────────────────────────────────────────────── */
    --ui-icon-size-small:  16px;
    --ui-icon-size-medium: 20px;
    --ui-icon-size-large:  24px;

    /* ─── Z-index ───────────────────────────────────────────────── */
    --z-base:       0;
    --z-sticky:     10;
    --z-fullscreen-page: 90;
    --z-overlay:    100;
    --z-modal:      200;
    --z-fullscreen-modal: 10000;
    --z-toast:      300;

    /* ─── Viewport ──────────────────────────────────────────────── */
    --viewport-screen-height: 100vh;
    --keyboard-accessory-reserved-space: calc(var(--control-height-lg) + var(--spacing-sm));

    /* ─── App Loading ───────────────────────────────────────────── */
    --app-loading-logo-width: 155px;

    /* ─── Layout ────────────────────────────────────────────────── */
    --layout-mobile-footer-reserved-space: var(--bottom-nav-height);
    --layout-mobile-content-bottom-space:  calc(var(--layout-mobile-footer-reserved-space) + var(--spacing-xl));

    /* ─── Control Heights (inputs, selectors, chips, toolbars) ─────── */
    --control-height-sm: 40px;
    --control-height-md: 45px;
    --control-height-lg: 48px;
    --control-text-area-min-height: 200px;

    /* ─── Component: Bottom Nav ─────────────────────────────────── */
    --bottom-nav-height:              60px;
    --bottom-nav-icon-size:           24px;
    --bottom-nav-item-padding-top:    var(--spacing-md);
    --bottom-nav-item-padding-bottom: var(--spacing-xs);
    --bottom-nav-item-gap:            var(--spacing-xs);

    /* ─── Component: Icon Button ────────────────────────────────── */
    --icon-button-size:    48px;
    --icon-button-radius:  var(--radius-full);
    --icon-button-bg:      var(--color-bg-secondary);
    --ui-icon-button-size-medium:      var(--control-height-lg);
    --ui-icon-button-size-large:       56px;
    --ui-icon-button-image-size-small:  var(--ui-icon-size-small);
    --ui-icon-button-image-size-medium: var(--ui-icon-size-medium);
    --ui-icon-button-image-size-large:  var(--ui-icon-size-large);
    --ui-icon-button-bg-neutral:       var(--color-bg-secondary);
    --ui-icon-button-badge-size:        var(--spacing-lg);
    --ui-icon-button-badge-offset:      0;
    --ui-icon-button-badge-padding-x:   var(--spacing-xs);
    --ui-icon-button-badge-font-size:   var(--font-size-xs);
    --ui-icon-button-badge-border:      var(--border-width-strong) solid var(--color-bg);

    /* ─── Component: Action Sheet ───────────────────────────────── */
    --action-sheet-backdrop-bg:         rgba(0, 0, 0, 0.24);
    --action-sheet-radius:              var(--radius-lg);
    --action-sheet-gap:                 var(--spacing-md);
    --action-sheet-padding-inline:      var(--spacing-3xl);
    --action-sheet-padding-block-start: var(--spacing-lg);
    --action-sheet-padding-block-end:   var(--spacing-3xl);

    /* ─── Component: Confirmation Dialog ───────────────────────── */
    --dialog-backdrop-bg:           var(--color-overlay);
    --dialog-bg:                    var(--color-bg);
    --dialog-max-width:             390px;
    --dialog-inline-margin:         var(--spacing-xl);
    --dialog-radius:                32px;
    --dialog-shadow:                var(--shadow-floating-panel);
    --dialog-body-padding:          var(--spacing-4xl) var(--spacing-2xl) var(--spacing-2xl);
    --dialog-title-font-size:       var(--font-size-lg);
    --dialog-title-font-weight:     var(--font-weight-bold);
    --dialog-message-margin:        var(--spacing-lg) 0 0;
    --dialog-message-font-size:     var(--font-size-md);
    --dialog-actions-padding:       0 var(--spacing-2xl) var(--spacing-2xl);
    --dialog-action-gap:            var(--spacing-xl);
    --dialog-action-font-size:      var(--font-size-md);
    --dialog-primary-action-border: 0;

    /* ─── Component: Onboarding ────────────────────────────────── */
    --onboarding-screen-bg:                  var(--color-bg-secondary);
    --onboarding-screen-padding-inline:      var(--spacing-3xl);
    --onboarding-footer-reserved-space:      calc(var(--control-height-lg) + var(--spacing-4xl));
    --onboarding-content-top-offset:         var(--spacing-2xl);
    --onboarding-header-title-font-size:     17px;
    --onboarding-step-label-font-size:       var(--font-size-sm);
    --onboarding-progress-bar-height:        6px;
    --onboarding-company-image-size:         38px;
    --onboarding-company-logo-avatar-size:   150px;
    --onboarding-company-logo-placeholder-size: var(--onboarding-company-image-size);
    --onboarding-location-icon-size:         calc(var(--ui-icon-size-large) + var(--spacing-sm));
    --onboarding-description-text-area-min-height: calc((var(--spacing-4xl) * 8) + var(--spacing-xl));
    --onboarding-photo-add-button-size:      var(--spacing-3xl);
    --onboarding-photo-remove-button-size:   var(--spacing-3xl);
    --onboarding-photo-placeholder-icon-size: 44px;
    --onboarding-photo-tile-aspect-ratio:    1.18;
    --onboarding-invite-preview-offset:      calc(var(--spacing-4xl) + var(--spacing-3xl));
    --onboarding-invite-preview-bottom:      calc(var(--spacing-4xl) + var(--spacing-2xl));
    --onboarding-invite-comment-top:         calc(var(--spacing-4xl) + var(--spacing-xs));
    --onboarding-invite-comment-bottom:      calc((var(--spacing-4xl) * 2) + var(--spacing-xs));
    --onboarding-invite-card-shadow:         var(--shadow-floating-panel);
    --onboarding-invite-card-width:          292px;
    --onboarding-invite-footer-reserved-space: calc(var(--control-height-lg) + (var(--spacing-4xl) * 3));
    --share-dialog-max-width:                430px;
    --share-dialog-header-side:              var(--ui-icon-button-size-medium);
    --share-dialog-option-min-height:        72px;
    --share-dialog-option-icon-size:         44px;
    --share-dialog-option-icon-padding:      10px;
    --share-dialog-message-min-height:       20px;

    /* ─── Component: Company Invitation ───────────────────────── */
    --company-invitation-preview-header-bg: var(--color-bg-secondary);
    --company-invitation-preview-header-height: 72px;
    --company-invitation-preview-header-padding-inline: var(--spacing-2xl);
    --company-invitation-preview-header-side-width: var(--ui-icon-button-size-medium);
    --company-invitation-preview-content-padding-top: var(--spacing-3xl);
    --company-invitation-page-padding-inline: var(--spacing-3xl);
    --company-invitation-page-padding-block:  var(--spacing-2xl);
    --company-invitation-content-max-width:   520px;
    --company-invitation-content-padding-top: var(--spacing-4xl);
    --company-invitation-desktop-content-padding: var(--spacing-4xl);
    --company-invitation-logo-width:          151px;
    --company-invitation-logo-margin-bottom:  var(--spacing-4xl);
    --company-invitation-copy-gap:            var(--spacing-3xl);
    --company-invitation-benefits-margin-top: var(--spacing-2xl);
    --company-invitation-benefits-list-padding-left: calc(var(--spacing-3xl) + var(--spacing-xs));
    --company-invitation-form-margin-top:     calc(var(--spacing-4xl) + var(--spacing-lg));
    --company-invitation-form-gap:            var(--spacing-2xl);
    --company-invitation-compact-preview-content-padding-top: var(--spacing-xl);
    --company-invitation-compact-logo-margin-bottom: var(--spacing-2xl);
    --company-invitation-compact-copy-gap: var(--spacing-xl);
    --company-invitation-compact-benefits-gap: var(--spacing-sm);
    --company-invitation-compact-benefits-margin-top: var(--spacing-lg);
    --company-invitation-compact-form-margin-top: var(--spacing-2xl);
    --company-invitation-compact-form-gap: var(--spacing-lg);
    --company-invitation-line-width:          154px;
    --company-invitation-line-one-top:        calc((var(--company-invitation-page-padding-block) + var(--company-invitation-content-padding-top)) * -1);
    --company-invitation-line-one-right:      -38px;
    --company-invitation-line-two-right:      clamp(-112px, -8vw, -24px);
    --company-invitation-line-two-top:        316px;
    --company-invitation-input-border-color:  rgba(217, 217, 217, 0.7);
    --company-invitation-submit-bg:           #2b2b2b;
    --company-invitation-submit-disabled-bg:  var(--color-border);
    --company-invitation-submit-disabled-text: var(--color-text-placeholder);
    --company-invitation-error-border-color:  rgba(255, 255, 255, 0.4);
    --company-invitation-state-min-height:    320px;

    /* ─── Page: Pre-register Home ──────────────────────────────── */
    --pre-register-card-min-height:       220px;
    --pre-register-card-min-height-large: 236px;

    /* ─── Component: Segmented Control ──────────────────────────── */
    --segmented-control-height-sm:     var(--control-height-sm);
    --segmented-control-height-medium: var(--control-height-md);
    --segmented-control-height-large:  var(--control-height-lg);
    --segmented-control-padding:     2px;
    --segmented-control-gap:         0;
    --segmented-control-radius:      var(--radius-full);
    --segmented-control-item-radius: var(--radius-full);
    --segmented-control-bg:          var(--color-bg-secondary);
    --segmented-control-font-size:   15px;
    --segmented-control-font-weight: var(--segmented-control-selected-font-weight);
    --segmented-control-selected-font-weight: var(--font-weight-semibold);
    --segmented-control-text-color:  var(--color-text-secondary);
    --segmented-control-selected-text-color: var(--color-text-secondary);

    /* ─── Component: Segmented Action Header ────────────────────── */
    --segmented-action-header-padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);
    --segmented-action-header-gap:     var(--spacing-lg);

    /* ─── Component: Card ───────────────────────────────────────── */
    --card-radius:         var(--radius-sm);
    --card-border:         var(--border-default);
    --card-bg:             var(--color-bg);

    /* ─── Component: Profile Cards ──────────────────────────────── */
    --profile-card-title-font-size: 20px;

    /* ─── Component: Referral Card ──────────────────────────────── */
    --referral-card-name-font-size: var(--profile-card-title-font-size);

    /* ─── Component: Collection Card ───────────────────────────── */
    --collection-card-min-height:     80px;
    --collection-card-avatar-size:    50px;
    --collection-card-block-padding:  calc((var(--collection-card-min-height) - var(--collection-card-avatar-size) - (var(--border-width-default) * 2)) / 2);
    --collection-card-padding:        var(--collection-card-block-padding) var(--spacing-lg);
    --collection-card-column-gap:     var(--spacing-lg);
    --collection-card-body-gap:       var(--spacing-xs);
    --collection-card-avatar-radius:  var(--radius-full);

    /* ─── Component: Message Thread Card ───────────────────────── */
    --message-thread-card-height: 132px;

    /* ─── Component: Search Input ───────────────────────────────── */
    --search-height:       var(--control-height-md);
    --search-height-large: var(--control-height-lg);
    --search-radius:       var(--radius-full);
    --search-border:       var(--border-default);
    --search-padding-x:    var(--spacing-lg);
    --search-padding-y:    var(--spacing-md);
    --search-icon-size:    var(--ui-icon-size-small);
    --search-icon-size-large: var(--ui-icon-size-large);

    /* ─── Component: Buttons ─────────────────────────────────────── */
    --button-spinner-size:             var(--spacing-lg);
    --button-spinner-border:           var(--border-width-strong) solid rgba(255, 255, 255, 0.3);
    --button-spinner-border-top-color: var(--color-bg);

    /* ─── Component: Empty State ──────────────────────────────────── */
    --empty-state-icon-size:                 var(--icon-button-size);
    --empty-state-large-icon-container-size: calc(var(--spacing-4xl) + var(--spacing-4xl) + var(--spacing-xl));
    --empty-state-large-icon-size:           var(--spacing-4xl);
    --empty-state-large-icon-margin-bottom:  var(--spacing-xl);
    --empty-state-title-letter-spacing:      var(--tracking-none);
    --empty-state-message-letter-spacing:    var(--tracking-none);

    /* ─── Component: Notifications ────────────────────────────────── */
    --notifications-screen-bg:                    var(--color-bg);
    --notifications-screen-width:                 100vw;
    --notifications-screen-bleed-offset:          calc(50% - 50vw);
    --notifications-screen-inline-padding:        var(--worker-screen-inline-offset);
    --notifications-list-controls-gap:            var(--spacing-md);
    --notifications-list-controls-margin-bottom:  var(--spacing-lg);
    --notifications-list-items-gap:               var(--spacing-lg);
    --notifications-list-no-results-padding:      var(--spacing-4xl) var(--spacing-lg);
    --notifications-list-empty-max-width:         300px;
    --notifications-list-empty-icon-container-size: 100px;
    --notifications-list-empty-icon-size:         50px;
    --notifications-list-empty-icon-padding:      var(--spacing-md);
    --notifications-list-empty-icon-bg:           var(--color-bg-secondary);
    --notifications-list-empty-title-letter-spacing:   var(--tracking-none);
    --notifications-list-empty-message-letter-spacing: var(--tracking-none);
    --notifications-filter-scroll-padding-bottom:      0;
    --notifications-filter-chip-padding-y:        6px;
    --notifications-filter-chip-padding-x:        var(--spacing-lg);
    --notifications-filter-chip-gap:              var(--spacing-sm);
    --notifications-filter-chip-border:           var(--border-default);
    --notifications-filter-chip-bg:               var(--color-bg);
    --notifications-filter-chip-selected-border:  var(--border-primary);
    --notifications-filter-chip-selected-bg:      var(--color-primary);
    --notifications-filter-chip-selected-color:   var(--color-bg);
    --notifications-cell-gap:                     var(--spacing-md);
    --notifications-cell-padding:                 var(--spacing-md);
    --notifications-cell-radius:                  var(--radius-lg);
    --notifications-cell-border:                  var(--border-default);
    --notifications-cell-bg-read:                 var(--color-bg);
    --notifications-cell-bg-unread:               var(--color-bg-secondary);
    --notifications-cell-chevron-size:            var(--ui-icon-size-large);

    /* ─── Component: Header ─────── */
    --header-legacy-button-padding:               1rem 2rem;
    --header-back-rounded-size:                   44px;
    --header-side-z-index:                        1;
    --header-back-hover-opacity:                  0.92;
    --header-back-active-opacity:                 0.85;
    --header-icon-line-height:                    1;
    --header-legacy-button-radius:                var(--radius-xs);
    --header-legacy-button-width:                 200px;
    --header-legacy-button-height:                50px;
    --header-legacy-button-margin:                var(--spacing-md) 0;
    --header-legacy-button-bg:                    var(--color-primary);
    --header-legacy-button-bg-hover:              var(--color-primary-disabled);
    --header-legacy-button-text:                  var(--color-bg);
    --header-legacy-button-font-weight:           var(--font-weight-semibold);
    --header-legacy-button-transition:            background-color 0.2s ease-in-out;
    --header-create-job-padding:                  1.2rem 2.5rem;
    --header-create-job-width:                    240px;
    --header-create-job-height:                   60px;
    --header-create-job-font-size:                1.1rem;
    --header-create-job-font-weight:              700;
    --header-create-job-bg:                       #310ca9;
    --header-create-job-bg-hover:                 #4b23cf;
    --header-create-job-shadow:                   0 0 8px rgb(38 42 176 / 45%);
    --header-create-job-shadow-hover:             0 0 8px rgb(38 42 176 / 66%);
    --header-transparent-button-border:           var(--border-width-default) solid var(--color-bg);
    --header-transparent-button-transition:       background-color 0.3s;
    --header-transparent-button-hover-bg:         rgba(255, 255, 255, 0.1);
    --header-tooltip-width:                       200px;
    --header-tooltip-bg:                          #333333;
    --header-tooltip-color:                       var(--color-bg);
    --header-tooltip-radius:                      6px;
    --header-tooltip-padding:                     var(--spacing-sm);
    --header-tooltip-z-index:                     2;
    --header-tooltip-offset-bottom:               125%;
    --header-tooltip-offset-left:                 50%;
    --header-tooltip-margin-left:                 -100px;
    --header-tooltip-transition:                  opacity 0.3s;
    --header-tooltip-font-size:                   var(--font-size-xs);
    --header-tooltip-font-weight:                 var(--font-weight-regular);
    --header-tooltip-line-height:                 var(--line-height-normal);
    --header-tooltip-shadow:                      0 2px 8px rgba(0, 0, 0, 0.3);
    --header-tooltip-arrow-size:                  5px;
    --header-info-icon-size:                      0.75rem;
    --header-tooltip-mobile-width:                150px;
    --header-tooltip-mobile-margin-left:          -75px;
    --header-tooltip-mobile-font-size:            11px;
    --header-tooltip-mobile-padding:              6px;
    --header-tooltip-mobile-breakpoint:           768px;

    /* ─── Component: Chat Message ─────────────────────────────────── */
    --chat-message-bubble-max-width:     72%;
    --chat-message-bubble-padding:       var(--spacing-lg);
    --chat-message-bubble-radius:        var(--spacing-xl);
    --chat-message-bubble-corner-radius: var(--radius-sm);
    --chat-message-bubble-border:        var(--border-default);
    --chat-message-bubble-shadow:        0 1px 4px rgba(0, 0, 0, 0.08);
    --chat-message-bubble-outgoing-time-color: rgba(245, 245, 245, 0.78);

    /* ─── Component: Selectable Chip ──────────────────────────────── */
    --selectable-chip-height:       var(--control-height-sm);
    --selectable-chip-height-large: var(--control-height-sm);
    --selectable-chip-padding:      8px 18px;
    --selectable-chip-padding-large: 7px 20px;
    --selectable-chip-gap:          var(--spacing-sm);
    --selectable-chip-border:       var(--border-width-default) solid var(--color-primary);
    --selectable-chip-bg:           rgba(255, 255, 255, 0.68);
    --selectable-chip-text-color:   var(--color-text-secondary);
    --selectable-chip-font-size:    20px;
    --selectable-chip-check-width:  13px;
    --selectable-chip-check-height: 9px;

    /* ─── Component: Filter Chip Panel ───────────────────────────── */
    --filter-chip-panel-gap: var(--spacing-md);

    /* ─── Component: Glass Panel ─────────────────────────────────── */
    --glass-panel-radius:  var(--radius-md);
    --glass-panel-padding: var(--spacing-2xl);
    --glass-panel-border:  var(--border-width-strong) solid rgba(255, 255, 255, 0.95);
    --glass-panel-bg:      var(--color-bg-glass);
    --glass-panel-blur:    8px;

    /* ─── Component: Loading Skeleton ─────────────────────────────── */
    --loading-skeleton-item-height: 80px;

    /* ─── Component: Map Placeholder ──────────────────────────────── */
    --map-placeholder-height: var(--home-filter-panel-top);
    --map-placeholder-icon-size: var(--spacing-3xl);

    /* ─── Component: Job Map Pin ──────────────────────────────────── */
    --map-job-pin-width: 46px;
    --map-job-pin-height: 47px;
    --map-job-pin-count-size: 34px;
    --map-job-pin-count-top: 3px;
    --map-job-pin-count-left: 6px;
    --map-job-pin-count-font-size: var(--font-size-md);
    --map-job-pin-selected-scale: 1.08;

    /* ─── Component: Flyout Panel ───────────────────────────────────── */
    --flyout-panel-max-width: 500px;

    /* ─── Component: Company Profile ─────────────────────────────── */
    --company-profile-logo-size:              98px;
    --company-profile-logo-placeholder-size: 112px;
    --company-profile-body-top-space:         var(--spacing-3xl);
    --company-profile-name-font-size:         22px;
    --company-profile-website-top-space:      var(--spacing-2xl);
    --company-profile-about-top-space:        var(--spacing-4xl);
    --company-profile-photos-top-space:       var(--spacing-3xl);
    --company-profile-content-padding:        var(--spacing-2xl) var(--worker-screen-inline-offset) var(--worker-screen-content-bottom-space);
    --company-profile-skeleton-item-height:   96px;

    /* ─── Component: Worker Profile ─────────────────────────────── */
    --worker-profile-tabs-height:            46px;
    --worker-profile-avatar-size:            100px;
    --worker-profile-avatar-placeholder-size: 40px;
    --worker-profile-summary-gap:            var(--spacing-2xl);
    --worker-profile-edit-avatar-size:       var(--worker-profile-avatar-size);
    --worker-profile-edit-avatar-button-size: 48px;
    --worker-profile-edit-button-height:     var(--control-height-sm);
    --worker-profile-edit-button-top-space:  var(--spacing-2xl);
    --worker-profile-sections-top-space:     var(--spacing-2xl);
    --worker-profile-section-gap:            var(--spacing-xl);
    --worker-profile-work-card-min-height:   112px;
    --worker-profile-work-card-padding:      var(--spacing-lg);
    --worker-profile-edit-footer-reserved-space: calc(var(--control-height-lg) + var(--spacing-4xl) + var(--spacing-lg));

    /* ─── Layout: Worker Screens ───────────────────────────────── */
    --worker-screen-height:               100dvh;
    --worker-screen-toolbar-spacing:      var(--spacing-2xl);
    --worker-screen-inline-offset:        var(--worker-screen-toolbar-spacing);
    --worker-screen-content-bottom-space: var(--layout-mobile-content-bottom-space);
    --worker-screen-header-padding:       var(--spacing-xl) var(--worker-screen-inline-offset) var(--spacing-lg);
    --worker-screen-header-title-font-size:   18px;
    --worker-screen-header-title-line-height: var(--line-height-tight);
    --worker-screen-content-top-offset:   var(--spacing-lg);
    --worker-screen-content-gap:          var(--spacing-lg);
    --worker-screen-empty-state-offset-y: -125px;

    /* ─── Component: Welcome Step ───────────────────────────────── */
    --welcome-step-hero-height:                    350px;
    --welcome-step-hero-tablet-portrait-height:    min(87.1vw, calc(var(--app-viewport-height, 100vh) - var(--welcome-step-tablet-portrait-reserved-space)));
    --welcome-step-tablet-portrait-reserved-space: calc(var(--control-height-lg) + (var(--spacing-4xl) * 5) + var(--spacing-3xl));
    --welcome-step-hero-bg:                        #dcecff;
    --welcome-step-title-max-width:                305px;

    /* ─── Component: Auth Screens ───────────────────────────────── */
    --auth-screen-max-width:        430px;
    --auth-screen-padding-top:      var(--spacing-xl);
    --auth-screen-title-font-size:  20px;

    /* ─── Component: Message Details ─────────────────────────────── */
    --message-details-content-padding:  var(--spacing-4xl) var(--spacing-xl);
    --message-details-group-gap:        var(--spacing-2xl);
    --message-details-composer-padding: var(--spacing-lg) var(--spacing-xl);

    /* ─── Component: Home Screen ──────────────────────────────────── */
    --home-screen-height:             var(--worker-screen-height);
    --home-toolbar-spacing:           var(--worker-screen-toolbar-spacing);
    --home-map-toolbar-top-offset:    var(--home-toolbar-spacing);
    --home-toolbar-inline-offset:     var(--worker-screen-inline-offset);
    --home-toolbar-gap:               var(--spacing-lg);
    --home-filter-panel-gap:          var(--home-toolbar-spacing);
    --home-filter-panel-top:          calc(var(--home-map-toolbar-top-offset) + var(--ui-icon-button-size-medium) + var(--home-filter-panel-gap));
    --home-list-toolbar-padding:      var(--home-toolbar-spacing) var(--home-toolbar-inline-offset) var(--spacing-lg);
    --home-filter-inline-padding:     10px var(--spacing-lg) var(--spacing-md);
    --home-list-content-padding:      var(--worker-screen-content-top-offset) var(--home-toolbar-inline-offset);
    --home-list-content-bottom-space: var(--worker-screen-content-bottom-space);
    --home-jobs-count-margin:         0 0 var(--spacing-lg);

    /* ─── Component: Company Home ───────────────────────────────── */
    --company-home-welcome-font-size: 20px;
    --company-home-role-card-min-height: 140px;
    --company-home-empty-min-height: 320px;
    --company-home-empty-message-max-width: 320px;
    --company-home-empty-title-max-width: 320px;
    --company-home-empty-button-max-width: 220px;

    /* ─── Component: Applications Screen ────────────────────────── */
    --applications-screen-height:        var(--worker-screen-height);
    --applications-list-padding:         var(--worker-screen-content-top-offset) var(--worker-screen-inline-offset) var(--worker-screen-content-bottom-space);
    --applications-list-gap:             var(--worker-screen-content-gap);

    /* ─── Component: Job Details ──────────────────────────────────── */
    --job-details-footer-message-reserve:    calc(var(--font-size-md) * var(--line-height-normal));
    --job-details-content-bottom-space:      calc(
        var(--control-height-lg) +
        var(--job-details-footer-message-reserve) +
        var(--footer-padding-top) +
        var(--footer-padding-bot) +
        var(--spacing-sm) +
        var(--spacing-xl)
    );
    --job-details-title-font-size:           var(--font-size-xl);
    --job-details-skeleton-item-height:      60px;
    --job-details-complete-profile-button-bg:       var(--color-text-secondary);
    --job-details-complete-profile-button-bg-hover: var(--color-text-primary);
    --job-details-complete-profile-button-text:     var(--color-on-primary);

    /* ─── Page: Public Job Share ─────────────────────────────────── */
    --job-share-details-content-bottom-space: calc(
        var(--control-height-lg) +
        var(--control-height-sm) +
        var(--footer-padding-top) +
        var(--footer-padding-bot) +
        var(--spacing-md) +
        var(--spacing-4xl)
    );

    /* ─── Component: Page Header ────────────────────────────────── */
    --header-border:       var(--border-default);
    --header-bg:           var(--color-bg);

    /* ─── Component: Action Footer ──────────────────────────────── */
    --footer-bg:           var(--color-bg-secondary);
    --footer-padding-x:    var(--spacing-lg);
    --footer-padding-top:  var(--spacing-lg);
    --footer-padding-bot:  var(--spacing-4xl);
}