/*
 * VARIO ERP design tokens.
 *
 * Global primitive, semantic and component-level values for the VARIO UI.
 * This file is the source of truth for new shared UI values. It must not
 * contain component selectors or module-specific overrides.
 */

:root,
html[data-vario-theme] {
    /* Typography */
    --vario-font-family-ui: Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-weight-regular: 500;
    --vario-font-weight-medium: 600;
    --vario-font-weight-semibold: 700;
    --vario-font-weight-bold: 800;
    --vario-font-weight-heavy: 900;
    --vario-font-module-title-size: 19px;

    --vario-font-grid-header: 800 11.5px/24px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-field-label: 700 10px/12px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-field-label-compact: 800 9.5px/11px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-field-value: 700 11px/23px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-field-value-compact: 700 10.8px/14px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-button-compact: 700 11px/24px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-grid-footer-meta: 500 9px/12px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-grid-footer-button: 700 11px/22px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-tab: 800 11px/24px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-preview-title: 900 16px/18px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-preview-section-title: 900 12px/15px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-form-control: 700 10.8px/22px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-form-label: 900 10.5px/13px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-form-textarea: 700 11px/17px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-comment: 600 10px/14px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-section-action: 800 11px/25px Inter, "Segoe UI", Arial, sans-serif;
    --vario-font-row-action: 700 11px/20px Inter, "Segoe UI", Arial, sans-serif;

    /* Primitive colors */
    --vario-color-white: #ffffff;
    --vario-color-black: #000000;

    --vario-color-primary-500: #2377ff;
    --vario-color-primary-600: #1464ed;
    --vario-color-cobalt-700: #134f8c;
    --vario-color-cobalt-800: #0d3d70;
    --vario-color-cobalt-900: #061b3f;

    --vario-color-surface-page: #f2f5f9;
    --vario-color-surface-module: #e4ebf3;
    --vario-color-surface-panel: #f2f5f9;
    --vario-color-surface-card: #ffffff;
    --vario-color-surface-subtle: #f7f9fc;
    --vario-color-surface-muted: #f7f9fc;
    --vario-color-surface-selected: #e8f1ff;

    /* Shared list row interaction: variant 3, "Pelny kobalt". */
    --vario-component-list-row-hover-bg: #dfeeff;
    --vario-component-list-row-selected-bg: #195fb7;
    --vario-component-list-row-selected-text: #ffffff;
    --vario-component-list-row-selected-accent: #88c7ff;

    --vario-color-border-soft: #d4dfed;
    --vario-color-border-subtle: #e4ebf3;
    --vario-color-border-field: #c7d7ea;
    --vario-color-border-muted: #e4ebf3;
    --vario-color-border-grid-top: #d4dfed;
    --vario-color-border-tabs: #d4dfed;
    --vario-color-border-frame: #134f8c;

    --vario-color-text-strong: #092b53;
    --vario-color-text-default: #092b53;
    --vario-color-text-heading: #123960;
    --vario-color-text-muted: #526987;
    --vario-color-text-subtle: #6b7a90;
    --vario-color-text-disabled: #91a0b4;
    --vario-color-text-on-primary: #ffffff;
    --vario-color-text-rail-inactive: #f0f6ff;
    --vario-color-focus-ring: #75a7ff;

    --vario-color-danger-50: #fff8f8;
    --vario-color-danger-100: #fff1f1;
    --vario-color-danger-300: #f0b5b5;
    --vario-color-danger-600: #c01f1f;
    --vario-color-warning-50: #fff8e6;
    --vario-color-warning-100: #ffedbf;
    --vario-color-warning-600: #9a5b00;
    --vario-color-success-50: #edfff3;
    --vario-color-success-100: #ccf7da;
    --vario-color-success-600: #147a32;
    --vario-color-info-50: #eef4ff;
    --vario-color-info-100: #e7f0ff;
    --vario-color-info-600: #1263f1;

    /* Semantic status colors */
    --vario-status-draft-bg: var(--vario-color-info-50);
    --vario-status-draft-border: #bfcef1;
    --vario-status-draft-text: #2b4a7f;
    --vario-status-success-bg: var(--vario-color-success-100);
    --vario-status-success-border: #a8edbe;
    --vario-status-success-text: var(--vario-color-success-600);
    --vario-status-warning-bg: var(--vario-color-warning-100);
    --vario-status-warning-border: #f6d58b;
    --vario-status-warning-text: var(--vario-color-warning-600);
    --vario-status-danger-bg: var(--vario-color-danger-100);
    --vario-status-danger-border: var(--vario-color-danger-300);
    --vario-status-danger-text: var(--vario-color-danger-600);
    --vario-status-neutral-bg: #f1f5f9;
    --vario-status-neutral-border: #d9e2ec;
    --vario-status-neutral-text: #475569;

    /* Gradients */
    --vario-gradient-grid-header: #f7f9fc;
    --vario-gradient-primary-action: linear-gradient(180deg, #2377ff 0%, #1263f1 100%);
    --vario-gradient-clear-action: linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%);
    --vario-gradient-danger-action: linear-gradient(180deg, #fff8f8 0%, #fff1f1 100%);
    --vario-gradient-window-header: #134f8c;
    --vario-gradient-minimize-action: linear-gradient(180deg, #d8e5f5 0%, #a7bdd9 100%);
    --vario-gradient-empty-icon: linear-gradient(135deg, #eef4ff, #e7f0ff);

    /* Spacing */
    --vario-space-0: 0;
    --vario-space-1: 1px;
    --vario-space-2: 2px;
    --vario-space-3: 3px;
    --vario-space-4: 4px;
    --vario-space-5: 5px;
    --vario-space-6: 6px;
    --vario-space-7: 7px;
    --vario-space-8: 8px;
    --vario-space-10: 10px;
    --vario-space-12: 12px;
    --vario-space-14: 14px;
    --vario-space-16: 16px;
    --vario-space-18: 18px;
    --vario-space-24: 24px;

    /* Radius */
    --vario-radius-none: 0;
    --vario-radius-xs: 6px;
    --vario-radius-sm: 7px;
    --vario-radius-md: 8px;
    --vario-radius-lg: 10px;
    --vario-radius-xl: 16px;

    /* Shadows */
    --vario-shadow-none: none;
    --vario-shadow-panel: 0 14px 32px rgba(15, 23, 42, 0.04);
    --vario-shadow-panel-compact: 0 8px 18px rgba(15, 47, 84, 0.10);
    --vario-shadow-menu: 0 14px 30px rgba(7, 27, 61, 0.16);
    --vario-shadow-popover: var(--vario-shadow-menu);
    --vario-shadow-module-primary-action: 0 4px 10px rgba(18, 99, 241, 0.18);
    --vario-shadow-module-primary-action-hover: 0 6px 14px rgba(18, 99, 241, 0.24);
    --vario-shadow-button-secondary: 0 1px 2px rgba(9, 43, 83, 0.08);
    --vario-shadow-button-hover: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 4px 10px rgba(16, 42, 82, 0.14);
    --vario-shadow-button-primary-hover: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px rgba(24, 94, 221, 0.24);
    --vario-shadow-button-danger-hover: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 5px 12px rgba(185, 28, 28, 0.18);
    --vario-shadow-button-success-hover: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 5px 12px rgba(20, 122, 50, 0.18);
    --vario-shadow-button-warning-hover: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 5px 12px rgba(154, 91, 0, 0.18);
    --vario-shadow-button-pressed: inset 0 2px 4px rgba(3, 31, 83, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.16);
    --vario-shadow-rail: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 17, 42, 0.30), 0 10px 22px rgba(2, 20, 47, 0.24);
    --vario-shadow-rail-well: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 18px 36px rgba(15, 47, 84, 0.12);
    --vario-shadow-subtabs: 0 5px 9px rgba(15, 47, 84, 0.16);

    /* Layout heights and widths */
    --vario-size-sidebar-width: 240px;
    --vario-size-sidebar-collapsed-width: 58px;
    --vario-size-collapsed-module-trigger-width: 46px;
    --vario-size-collapsed-module-trigger-height: 36px;
    --vario-size-collapsed-module-trigger-radius: 6px;
    --vario-size-collapsed-module-trigger-icon: 17px;
    --vario-size-collapsed-module-segment-width: 12px;
    --vario-size-collapsed-module-segment-icon: 10px;
    --vario-size-collapsed-module-menu-width: 288px;
    --vario-size-collapsed-module-menu-gap: 8px;
    --vario-size-collapsed-module-menu-viewport-inset: 8px;
    --vario-size-collapsed-module-menu-header-height: 50px;
    --vario-size-collapsed-module-menu-option-height: 46px;
    --vario-size-topbar-height: 58px;
    --vario-size-statusbar-height: 22px;
    --vario-size-report-catalog-header-height: 54px;
    --vario-size-report-catalog-row-height: 46px;
    --vario-size-report-catalog-icon: 26px;
    --vario-size-report-dialog-max-width: 1180px;
    --vario-size-module-frame-height: calc(var(--vario-size-topbar-height) + var(--vario-size-statusbar-height));
    --vario-size-module-content-x: 4px;
    --vario-size-module-shell-x: 10px;

    --vario-size-list-search-height: 148px;
    --vario-size-list-advanced-height: 78px;
    --vario-size-list-field-grid-height: 76px;
    --vario-size-list-preview-height: 214px;
    --vario-size-list-bottom-panel-height: 254px;
    --vario-size-register-bottom-panel-height: 420px;
    --vario-size-register-bottom-panel-min-height: 230px;
    --vario-size-register-bottom-panel-max-height: 480px;
    --vario-ratio-register-search-panel: 38%;
    --vario-ratio-register-search-panel-min: 30%;
    --vario-ratio-register-search-panel-max: 56%;
    --vario-size-register-panel-stack-threshold: 1020px;
    --vario-size-register-panel-stacked-min-height: 360px;
    --vario-size-register-panel-tab-height: var(--vario-size-document-category-icon-field-compact-tab-height);
    --vario-size-register-panel-tab-icon-height: var(--vario-size-document-category-icon-field-compact-icon-height);
    --vario-size-register-panel-tab-edge-gap: 4px;
    --vario-size-register-panel-header-height: calc(var(--vario-size-register-panel-tab-height) + var(--vario-size-register-panel-tab-edge-gap) + var(--vario-size-register-panel-tab-edge-gap));
    --vario-size-register-panel-settings: 26px;
    --vario-size-register-panel-settings-edge-gap: 5px;
    --vario-size-register-panel-settings-slot-width: 40px;
    --vario-size-register-panel-footer-height: 36px;
    --vario-size-register-panel-content-padding: 14px;
    --vario-size-register-panel-field-row-gap: 12px;
    --vario-size-register-panel-field-column-gap: 10px;
    --vario-size-register-preview-row-gap: 22px;
    --vario-size-register-preview-column-gap: 18px;
    --vario-size-line-lookup-header-height: 50px;
    --vario-size-line-lookup-search-height: 254px;
    --vario-size-line-lookup-search-min-height: 162px;
    /* The catalog keeps the majority of a 720px viewport; users can still
       enlarge the lower search/selection area with the shared splitter. */
    --vario-size-line-lookup-lower-area-height: 230px;
    --vario-size-line-lookup-lower-area-min-height: 230px;
    --vario-size-line-lookup-lower-area-max-height: 480px;
    --vario-size-line-lookup-selection-mobile-height: 210px;
    --vario-ratio-line-lookup-search-panel: 38%;
    --vario-ratio-line-lookup-search-panel-min: 30%;
    --vario-ratio-line-lookup-search-panel-max: 56%;
    --vario-size-line-lookup-resizer-height: 8px;
    --vario-size-line-lookup-footer-height: 42px;
    --vario-size-list-bottom-panel-tabs-height: 32px;
    --vario-size-list-bottom-panel-icon-field-tabs-height: 36px;
    --vario-size-list-bottom-panel-icon-field-tab-height: 28px;
    --vario-size-list-bottom-panel-icon-field-icon-width: 29px;
    --vario-size-list-bottom-panel-icon-field-icon-height: 26px;
    --vario-size-list-bottom-panel-icon-field-compact-tabs-height: 32px;
    --vario-size-list-bottom-panel-icon-field-compact-tab-height: var(--vario-size-button-compact-height);
    --vario-size-list-bottom-panel-icon-field-compact-icon-height: calc(var(--vario-size-button-compact-height) - 2px);
    --vario-size-document-category-icon-field-row-height: 36px;
    --vario-size-document-category-icon-field-tab-height: 28px;
    --vario-size-document-category-icon-field-icon-width: 29px;
    --vario-size-document-category-icon-field-icon-height: 26px;
    --vario-size-document-category-icon-field-gap: 7px;
    --vario-size-document-category-icon-field-compact-row-height: 32px;
    --vario-size-document-category-icon-field-compact-tab-height: 22px;
    --vario-size-document-category-icon-field-compact-icon-height: 20px;
    --vario-size-document-subcategory-row-height: 32px;
    --vario-size-document-subcategory-segment-height: 26px;
    --vario-size-document-subcategory-content-height: 24px;
    --vario-size-document-subcategory-compact-row-height: 28px;
    --vario-size-document-subcategory-compact-segment-height: 22px;
    --vario-size-document-subcategory-compact-content-height: 20px;
    --vario-size-document-subcategory-segment-padding-x: 12px;
    --vario-size-document-subcategory-icon: 12px;
    --vario-size-document-subcategory-icon-box: 13px;
    --vario-size-document-subcategory-gap: 6px;
    --vario-size-document-subcategory-radius: 5px;
    --vario-size-document-window-tab-rail-height: 32px;
    --vario-size-document-window-tab-height: 24px;
    --vario-size-document-window-tab-icon-width: 25px;
    --vario-size-document-window-tab-icon-height: 22px;
    --vario-size-document-window-tab-icon-size: 13px;
    --vario-size-document-window-tab-gap: 4px;
    --vario-size-document-window-tab-content-gap: 8px;
    --vario-size-document-window-tab-padding-right: 10px;
    --vario-size-document-window-tab-radius: 5px;
    --vario-size-list-bottom-panel-metric-height: 36px;
    --vario-size-list-bottom-panel-separator-height: 8px;
    --vario-size-list-bottom-panel-separator-width: 8px;
    --vario-size-list-bottom-panel-filter-rail-width: 166px;
    --vario-size-list-bottom-panel-filter-rail-compact-width: 154px;
    --vario-size-search-settings-button-height: 29px;
    --vario-size-search-settings-button-radius: 5px;
    --vario-size-search-settings-menu-width: 270px;
    --vario-size-search-settings-menu-item-height: 31px;
    --vario-size-search-settings-icon: 14px;
    --vario-size-search-settings-chevron: 12px;

    /* Shared sidebar: Granat i chłodna szarość */
    --vario-sidebar-background: #134f8c;
    --vario-sidebar-foreground: #f4f8ff;
    --vario-sidebar-muted: #d0e0f1;
    --vario-sidebar-border: #0d3d70;
    --vario-sidebar-hover: #1b5d9f;
    --vario-sidebar-active-background: #e8f1ff;
    --vario-sidebar-active-foreground: #123960;
    --vario-sidebar-active-border: #b4d0f5;
    --vario-sidebar-child-active-background: #dceaff;
    --vario-sidebar-accent: #5eabff;
    --vario-sidebar-branch: #7faad2;
    --vario-sidebar-press-shadow: rgba(4, 31, 62, 0.34);
    --vario-size-list-preview-rail-width: 166px;
    --vario-size-list-preview-rail-compact-width: 154px;
    --vario-size-list-preview-nav-item-height: 29px;
    --vario-size-list-preview-nav-gap: 4px;
    --vario-size-document-preview-toolbar-height: 26px;
    --vario-size-document-preview-metrics-height: 52px;
    --vario-size-document-preview-inner-footer-height: 25px;
    --vario-size-document-preview-local-search-width: 225px;
    --vario-size-document-preview-local-search-height: 22px;
    --vario-size-document-search-height: 165px;
    --vario-size-document-search-height-with-subtabs: 191px;

    --vario-size-grid-header-height: 26px;
    --vario-size-grid-row-height: 22px;
    --vario-size-grid-footer-height: 28px;
    --vario-size-grid-footer-button-height: 24px;
    --vario-size-grid-footer-button-icon: 14px;
    --vario-size-grid-footer-button-radius: var(--vario-radius-md);
    --vario-size-grid-footer-button-gap: 6px;
    --vario-size-column-chooser-width: 360px;
    --vario-size-form-control-height: 24px;
    --vario-size-form-control-radius: 8px;
    --vario-size-form-textarea-height: 48px;
    --vario-size-section-action-height: 27px;
    --vario-size-row-action-height: 22px;
    --vario-size-icon-action: 24px;
    --vario-size-compact-dialog-footer-height: 44px;
    --vario-size-field-height: 25px;
    --vario-size-field-label-height: 12px;
    --vario-size-field-label-compact-height: 11px;
    --vario-size-button-compact-height: 26px;
    --vario-size-document-footer-action-height: 28px;
    --vario-size-document-footer-action-icon: 12px;
    --vario-size-document-footer-action-radius: 8px;
    --vario-size-list-toolbar-action-height: 26px;
    --vario-size-list-toolbar-action-icon: 13px;
    --vario-size-list-toolbar-action-radius: 8px;
    --vario-size-module-primary-action-height: 30px;
    --vario-size-document-category-create-action-height: 24px;
    --vario-size-create-menu-width: 360px;
    --vario-size-search-tabs-height: 28px;
    --vario-size-command-rail-height: 28px;
    --vario-size-command-rail-active-tab-height: 23px;
    --vario-size-command-subrail-height: 28px;
    --vario-size-window-header-height: 58px;
    --vario-size-window-tabs-height: 30px;
    --vario-size-window-footer-height: 44px;
    --vario-size-icon-topbar-box: 36px;
    --vario-size-icon-topbar-svg: 30px;

    /* Button interaction */
    --vario-motion-button-press-duration: 90ms;
    --vario-motion-button-return-duration: 160ms;
    --vario-motion-button-easing: ease-out;
    --vario-motion-list-row-state-duration: 100ms;
    --vario-filter-button-hover: brightness(1.035) saturate(1.02);
    --vario-filter-button-pressed: brightness(0.94) saturate(0.98);

    /* Component aliases */
    --vario-component-list-bg: var(--vario-color-surface-page);
    --vario-component-module-bg: var(--vario-color-surface-module);
    --vario-component-panel-bg: var(--vario-color-surface-panel);
    --vario-component-card-bg: var(--vario-color-surface-card);
    --vario-component-rail-bg: #e4ebf3;
    --vario-component-rail-border: #d4dfed;
    --vario-component-rail-text: var(--vario-color-text-default);
    --vario-component-focus-border: var(--vario-color-border-field);
    --vario-component-focus-shadow: none;
    --vario-component-topbar-separator: #d9e2ed;
    --vario-component-topbar-action-text: var(--vario-color-primary-500);
    --vario-component-topbar-action-hover-text: var(--vario-color-primary-500);
    --vario-component-topbar-action-hover-bg: var(--vario-color-surface-selected);
    --vario-component-collapsed-module-menu-bg: var(--vario-menu-bg);
    --vario-component-collapsed-module-menu-header-bg: var(--vario-color-surface-subtle);
    --vario-component-collapsed-module-menu-hover-bg: var(--vario-menu-hover-bg);
    --vario-component-collapsed-module-menu-active-bg: var(--vario-color-surface-selected);
    --vario-component-collapsed-module-menu-active-border: var(--vario-color-border-field);
    --vario-component-collapsed-module-menu-active-text: var(--vario-color-primary-600);
    --vario-component-collapsed-module-menu-border: var(--vario-color-border-soft);
    --vario-component-collapsed-module-menu-text: var(--vario-color-text-default);
    --vario-component-collapsed-module-menu-muted: var(--vario-color-text-muted);
    --vario-component-collapsed-module-segment-bg: color-mix(in srgb, var(--vario-sidebar-foreground) 5%, transparent);
    --vario-component-collapsed-module-segment-border: color-mix(in srgb, var(--vario-sidebar-foreground) 14%, transparent);
    --vario-component-collapsed-module-segment-icon: var(--vario-sidebar-muted);
    --vario-component-collapsed-module-segment-active-bg: color-mix(in srgb, var(--vario-color-primary-600) 8%, transparent);
    --vario-component-collapsed-module-segment-active-border: var(--vario-sidebar-active-border);
    --vario-component-collapsed-module-segment-active-icon: var(--vario-color-primary-600);
    --vario-component-document-subcategory-row-bg: #f2f5f9;
    --vario-component-document-subcategory-segment-bg: var(--vario-color-surface-card);
    --vario-component-document-subcategory-segment-border: var(--vario-color-border-tabs);
    --vario-component-document-subcategory-segment-text: var(--vario-color-text-muted);
    --vario-component-document-subcategory-segment-hover-bg: var(--vario-color-surface-selected);
    --vario-component-document-subcategory-active-bg: #1464ed;
    --vario-component-document-subcategory-active-text: var(--vario-color-text-on-primary);
    --vario-component-document-window-tabs-bg: var(--vario-color-surface-muted);
    --vario-component-document-window-tab-bg: var(--vario-color-surface-card);
    --vario-component-document-window-tab-icon-bg: var(--vario-color-surface-muted);
    --vario-component-document-window-tab-border: var(--vario-color-border-field);
    --vario-component-document-window-tab-text: var(--vario-color-text-muted);
    --vario-component-document-window-tab-active-bg: var(--vario-color-surface-selected);
    --vario-component-document-window-tab-active-border: color-mix(in srgb, var(--vario-color-primary-600) 38%, var(--vario-color-border-field));
    --vario-component-document-window-tab-active-text: var(--vario-color-primary-600);
    --vario-component-document-window-tab-active-icon-bg: var(--vario-color-primary-600);
    --vario-component-grid-footer-bg: var(--vario-color-surface-subtle);
    --vario-component-grid-footer-border: var(--vario-color-border-soft);
    --vario-component-grid-footer-text: var(--vario-color-text-muted);
    --vario-component-search-settings-button-bg: var(--vario-color-surface-card);
    --vario-component-search-settings-button-border: var(--vario-color-border-soft);
    --vario-component-search-settings-button-text: var(--vario-color-text-default);
    --vario-component-search-settings-menu-bg: var(--vario-color-surface-card);
    --vario-component-search-settings-menu-hover-bg: var(--vario-color-surface-selected);
    --vario-component-search-settings-menu-border: var(--vario-color-border-soft);
    --vario-component-column-chooser-bg: var(--vario-color-surface-card);
    --vario-component-column-chooser-header-bg: var(--vario-color-surface-subtle);
    --vario-component-column-chooser-border: var(--vario-color-border-soft);
    --vario-component-primary-action-bg: var(--vario-gradient-primary-action);
    --vario-component-primary-action-border: var(--vario-color-primary-600);
    --vario-component-primary-action-hover-bg: #0751d8;
    --vario-component-primary-action-hover-border: #0751d8;
    --vario-component-primary-action-active-bg: #0647bd;
    --vario-component-primary-action-active-border: #0647bd;
    --vario-component-primary-action-disabled-bg: #c7d4e7;
    --vario-component-primary-action-disabled-border: #b7c6dc;
    --vario-component-primary-action-disabled-text: #ffffff;

    /* Shared filter, select and warehouse-location component geometry. */
    --vario-date-range-field-height: 25px;
    --vario-date-range-popover-width: 356px;
    --vario-date-range-row-height: 30px;
    --vario-date-picker-field-height: var(--vario-size-form-control-height);
    --vario-date-picker-field-padding-x: 8px;
    --vario-date-picker-field-radius: var(--vario-size-form-control-radius);
    --vario-date-picker-popup-width: 296px;
    --vario-date-picker-viewport-gap: 8px;
    --vario-date-picker-radius: 8px;
    --vario-date-picker-title-height: 31px;
    --vario-date-picker-nav-height: 34px;
    --vario-date-picker-footer-height: 34px;
    --vario-date-picker-icon-action-size: 24px;
    --vario-date-picker-action-height: 24px;
    --vario-date-picker-day-height: 29px;
    --vario-date-picker-day-height-touch: 44px;
    --vario-date-picker-touch-target: 44px;
    --vario-date-picker-grid-gap: 3px;
    --vario-font-date-picker: 700 11px/16px Inter, "Segoe UI", Arial, sans-serif;
    --vario-date-picker-surface: var(--vario-surface);
    --vario-date-picker-surface-alt: var(--vario-surface-alt);
    --vario-date-picker-rail: var(--vario-surface-muted);
    --vario-date-picker-text: var(--vario-text);
    --vario-date-picker-muted: var(--vario-text-muted);
    --vario-date-picker-border: var(--vario-border);
    --vario-date-picker-soft-border: var(--vario-border-soft);
    --vario-date-picker-accent: var(--vario-accent);
    --vario-date-picker-accent-surface: var(--vario-surface-hover);
    --vario-date-picker-selected: var(--vario-accent);
    --vario-date-picker-on-selected: var(--vario-color-text-on-primary, var(--vario-active-text));
    --vario-date-picker-selected-shadow: inset 0 1px 2px rgb(255 255 255 / 20%), 0 1px 3px color-mix(in srgb, var(--vario-accent) 28%, transparent);
    --vario-date-picker-shadow: var(--vario-menu-shadow);
    --vario-select-list-radius: 7px;
    --vario-select-option-min-height: 30px;
    --vario-select-list-max-height: 232px;
    --vario-select-option-font-size: 11px;
    --vario-select-option-line-height: 16px;
    --vario-select-option-weight: 600;
    --vario-select-option-hover: #edf5ff;
    --vario-select-option-selected: #dfedff;
    --vario-select-option-selected-text: #154f91;
    --vario-select-popover-bg: #ffffff;
    --vario-select-popover-border: #c9d7e7;
    --vario-select-popover-text: #092b53;
    --vario-select-popover-muted: #647891;
    --vario-select-popover-shadow: 0 10px 28px rgba(12, 38, 68, 0.2);
    --vario-focus-ring-color: #1464ed;
    --vario-date-range-label: #58708d;
    --vario-date-range-popover-border: #d4dfed;
    --vario-date-range-popover-bg: #ffffff;
    --vario-date-range-text: #092b53;
    --vario-date-range-shadow: 0 14px 34px rgb(9 43 83 / 20%);
    --vario-date-range-header-bg: #f7f9fc;
    --vario-date-range-muted: #58708d;
    --vario-date-range-hover-bg: #dfeeff;
    --vario-date-range-active-border: #b4d0f5;
    --vario-date-range-active-bg: #e8f1ff;
    --vario-date-range-active-text: #1464ed;
    --vario-date-range-input-bg: #ffffff;
    --vario-print-paper-bg: #ffffff;
    --vario-print-ink: #000000;
    --vario-component-icon-tab-shadow: 0 1px 2px rgba(6, 36, 68, 0.07);
    --vario-component-icon-tab-active-shadow: 0 1px 3px rgba(18, 99, 241, 0.12);
    --vario-warehouse-location-bottom-ratio-search: 1.12fr;
    --vario-warehouse-location-bottom-ratio-preview: 1fr;

    /* Layer order inside the shared application topbar stacking context. */
    --vario-layer-module-action-backdrop: 9;
    --vario-layer-module-action-menu: 10;
    --vario-layer-module-action-trigger: 11;
    --vario-layer-sidebar-desktop: 100;
    --vario-layer-sidebar-mobile-backdrop: 10900;
    --vario-layer-sidebar-mobile: 11000;
    --vario-layer-collapsed-module-menu: 12000;
    --vario-layer-filter-config-backdrop: 65300;
    --vario-layer-filter-config-dialog: 65310;
    --vario-layer-date-picker: 2147483100;
}