@keenmate/pure-admin-core 2.3.1 → 2.3.2

package/src/scss/variables/_components.scss

@@ -1,748 +1,748 @@
-// ============================================================================
-// COMPONENT VARIABLES
-// Component-specific dimensions, paddings, and settings
-// ============================================================================
-
-// NOTE: All base, layout, typography, spacing, colors, and system variables
-// are available in global scope via @import in _index.scss
-// No @use needed since we use @import for proper !default cascading
-
-// NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
-
-// ============================================================================
-// BADGE SYSTEM
-// ============================================================================
-$badge-padding-v: 0.2rem !default;         // 2px (was 0.125rem)
-$badge-padding-h: 0.8rem !default;         // 8px (was 0.5rem)
-
-// Composite badge dimensions
-$composite-badge-icon-width: 3.2rem !default;    // 32px (was 2rem)
-$composite-badge-height: 2.8rem !default;        // 28px (was 1.75rem)
-$composite-badge-label-padding: 0.8rem !default; // 8px (was 0.5rem)
-$composite-badge-button-width: 2.4rem !default;  // 24px (was 1.5rem)
-$composite-badge-min-label-width: 4.8rem !default; // 48px (was 3rem)
-
-// Badge group
-$badge-group-gap: 0.8rem !default;         // 8px (was 0.5rem)
-$badge-group-visible-limit: 5 !default;
-
-// Badge colors
-$badge-success-bg: $success-text-light !default;
-$badge-success-text: $success-text !default;
-$badge-warning-bg: $warning-text-light !default;
-$badge-warning-text: $warning-text !default;
-$badge-info-bg: $info-text-light !default;
-$badge-info-text: $info-text !default;
-$badge-danger-bg: $danger-text-light !default;
-$badge-danger-text: $danger-text !default;
-$badge-pill-radius: 50rem !default;
-
-// Composite badge colors
-$composite-badge-icon-bg: $btn-secondary-bg !default;
-$composite-badge-label-bg: $secondary-light-bg !default;
-$composite-badge-label-text: $secondary-light-text !default;
-$composite-badge-label-hover-bg: $secondary-lighter-bg !default;
-
-// ============================================================================
-// BUTTON SYSTEM
-// ============================================================================
-$btn-group-gap: 0.3rem !default;           // 3px - default gap (use gap-* utilities for other sizes)
-
-// Button specific - vertical padding matches input padding for height alignment
-$btn-padding-v: 0.8rem !default;           // 8px - matches input default
-$btn-padding-h: 1.2rem !default;           // 12px
-$btn-padding-xs-v: 0.6rem !default;        // 6px - matches input-xs
-$btn-padding-xs-h: 0.8rem !default;        // 8px
-$btn-padding-sm-v: 0.8rem !default;        // 8px - matches input default
-$btn-padding-sm-h: 1rem !default;          // 10px
-$btn-padding-lg-v: 0.8rem !default;        // 8px - matches input default
-$btn-padding-lg-h: 1.4rem !default;        // 14px
-$btn-padding-xl-v: 0.8rem !default;        // 8px - matches input default
-$btn-padding-xl-h: 1.6rem !default;        // 16px
-$btn-border-width: 1px !default;
-$btn-icon-margin: 0.8rem !default;         // 8px (was 0.5rem)
-$btn-min-width: 9.6rem !default;           // 96px (was 6rem)
-
-// Button fixed-width utilities (10px base)
-$btn-width-1x: 1.6rem !default;            // 16px (was 1rem)
-$btn-width-2x: 3.2rem !default;            // 32px (was 2rem)
-$btn-width-3x: 4.8rem !default;            // 48px (was 3rem)
-$btn-width-4x: 6.4rem !default;            // 64px (was 4rem)
-$btn-width-5x: 8rem !default;              // 80px (was 5rem)
-$btn-width-6x: 9.6rem !default;            // 96px (was 6rem)
-$btn-width-7x: 11.2rem !default;           // 112px (was 7rem)
-$btn-width-8x: 12.8rem !default;           // 128px (was 8rem)
-$btn-width-9x: 14.4rem !default;           // 144px (was 9rem)
-$btn-width-10x: 16rem !default;            // 160px (was 10rem)
-
-// Button interaction
-$btn-hover-lift: -1px !default;
-$btn-hover-brightness: 0.9 !default;
-$btn-disabled-opacity: $opacity-disabled !default;
-$btn-focus-ring-opacity: 0.25 !default;
-
-// Button heights - aligned with input heights (source of truth from _base.scss)
-// These are used for icon-only buttons and table cell heights
-$btn-height-xs: #{$base-input-size-xs-height}rem !default;   // 31px
-$btn-height-sm: #{$base-input-size-sm-height}rem !default;   // 33px
-$btn-height-base: #{$base-input-size-md-height}rem !default; // 35px
-$btn-height-lg: #{$base-input-size-lg-height}rem !default;   // 38px
-$btn-height-xl: #{$base-input-size-xl-height}rem !default;   // 41px
-
-// Icon-only button sizes - match button heights (aligned with inputs)
-$btn-icon-only-size-xs: $btn-height-xs !default;
-$btn-icon-only-size-sm: $btn-height-sm !default;
-$btn-icon-only-size: $btn-height-base !default;
-$btn-icon-only-size-lg: $btn-height-lg !default;
-$btn-icon-only-size-xl: $btn-height-xl !default;
-
-// ============================================================================
-// MODAL SYSTEM
-// ============================================================================
-$modal-overlay-bg: rgba(0, 0, 0, 0.5) !default;
-$modal-content-bg: #ffffff !default;
-$modal-header-padding-v: 1.2rem !default;  // 12px (was 0.75rem)
-$modal-header-padding-h: 1.6rem !default;  // 16px (was 1rem)
-$modal-header-padding: $modal-header-padding-v $modal-header-padding-h !default;
-$modal-body-padding-v: 1.2rem !default;    // 12px (was 0.75rem)
-$modal-body-padding-h: 1.6rem !default;    // 16px (was 1rem)
-$modal-body-padding: $modal-body-padding-v $modal-body-padding-h !default;
-$modal-footer-padding-v: 1.2rem !default;  // 12px (was 0.75rem)
-$modal-footer-padding-h: 1.6rem !default;  // 16px (was 1rem)
-$modal-footer-padding: $modal-footer-padding-v $modal-footer-padding-h !default;
-$modal-sm-width: 32rem !default;           // 320px (was 20rem)
-$modal-md-width: 48rem !default;           // 480px (was 30rem)
-$modal-lg-width: 80rem !default;           // 800px (was 50rem)
-$modal-xl-width: 112rem !default;          // 1120px (was 70rem)
-$modal-xxl-width: 144rem !default;         // 1440px (was 90rem)
-$modal-fw-margin: 1.6rem !default;         // 16px (was 1rem)
-$modal-border-radius: 4px !default;
-$modal-close-font-size: $font-size-lg !default;
-$modal-title-font-size: $font-size-lg !default;
-$modal-box-shadow: 0 0.4rem $spacing-sm rgba(0, 0, 0, 0.1) !default;
-$modal-close-size: 4rem !default;            // 40px (was 2.5rem)
-$modal-body-scrollable-max-height: 60vh !default;
-$modal-mobile-margin: $spacing-sm !default;
-$modal-mobile-max-height: 95vh !default;
-$modal-header-hover-overlay: rgba(255, 255, 255, 0.1) !default;
-$modal-close-hover-opacity: $opacity-hover !default;
-$modal-close-border-width: $border-width-base !default;
-
-// ============================================================================
-// PROFILE PANEL SYSTEM
-// ============================================================================
-$profile-panel-width: 20vw !default;
-$profile-panel-max-width: 48rem !default;  // 480px (was 30rem)
-$profile-panel-width-fixed: 320px !default;
-$profile-panel-toggle-size: 40px !default;
-$profile-panel-toggle-size-open: 45px !default;
-$profile-avatar-size: 6.4rem !default;       // 64px (was 4rem)
-$profile-close-size: 3.2rem !default;        // 32px (was 2rem)
-$profile-nav-icon-width: $sidebar-icon-size !default;
-$profile-section-gap: $spacing-xl !default;
-$profile-overlay-bg: rgba(0, 0, 0, 0.3) !default;
-$profile-button-padding-v: $spacing-sm !default;
-$profile-button-padding-h: $spacing-md !default;
-$profile-role-letter-spacing: 0.5px !default;
-$profile-panel-mobile-max-width: 40rem !default;  // 400px (was 25rem)
-$profile-panel-content-padding: 1.6rem !default;  // Matches sidebar-padding horizontal (16px)
-
-// ============================================================================
-// DETAIL PANEL SYSTEM
-// ============================================================================
-$detail-panel-width: 40rem !default;
-$detail-panel-min-width: 28rem !default;
-$detail-panel-max-width: 64rem !default;
-$detail-panel-mobile-width: 90vw !default;
-$detail-panel-header-padding-v: 1.2rem !default;
-$detail-panel-header-padding-h: 1.6rem !default;
-$detail-panel-body-padding-v: 1.2rem !default;
-$detail-panel-body-padding-h: 1.6rem !default;
-$detail-panel-footer-padding-v: 1.2rem !default;
-$detail-panel-footer-padding-h: 1.6rem !default;
-$detail-panel-overlay-bg: rgba(0, 0, 0, 0.3) !default;
-$detail-panel-z-index: 4500 !default;
-$detail-panel-shadow: $shadow-profile-panel !default;
-$detail-panel-close-size: 3.2rem !default;
-$detail-panel-resize-handle-width: 6px !default;
-$detail-panel-selected-bg: rgba($accent-color, 0.08) !default;
-
-// ============================================================================
-// CARD SYSTEM
-// ============================================================================
-$card-border-width: $border-width-base !default;  // Card outer border (themes can override)
-$card-border-radius: $border-radius-lg !default;  // Controls card + header corners
-$card-body-padding-v: 1.6rem !default;     // 16px vertical
-$card-body-padding-h: 1rem !default;       // 10px horizontal
-$card-header-padding-v: 0.5rem !default;   // 5px vertical
-$card-header-padding-h: 1rem !default;     // 10px horizontal - matches body
-$card-header-min-height: 4rem !default;    // 40px - fits xs buttons (32px) with padding
-$card-footer-padding-v: 1.2rem !default;   // 12px vertical
-$card-footer-padding-h: 1rem !default;     // 10px horizontal - matches body
-$card-grid-min-width: 280px !default;
-$card-stat-padding-v: $spacing-lg !default;
-$card-stat-padding-h: $spacing-base !default;
-
-// Card inline tabs (tabs inside header)
-$card-tab-inline-padding-v: 0.3rem !default;   // 3px - compact for header
-$card-tab-inline-padding-h: 0.8rem !default;   // 8px
-$card-tab-hover-opacity: 0.1 !default;
-
-// ============================================================================
-// TABLE SYSTEM
-// ============================================================================
-// Table base padding (matches button/input default)
-$table-padding-base-v: 0.8rem !default;    // 8px - matches button SM/default
-$table-padding-base-h: 0.8rem !default;    // 8px
-
-// Table size variants - synchronized with button/input sizes
-$table-padding-xs-v: $btn-padding-xs-v !default;  // 0.6rem
-$table-padding-xs-h: $btn-padding-xs-h !default;  // 0.8rem
-$table-padding-sm-v: $btn-padding-sm-v !default;  // 0.8rem
-$table-padding-sm-h: $btn-padding-sm-h !default;  // 1rem
-$table-padding-lg-v: $btn-padding-lg-v !default;  // 0.8rem
-$table-padding-lg-h: $btn-padding-lg-h !default;  // 1.4rem
-$table-padding-xl-v: $btn-padding-xl-v !default;  // 0.8rem
-$table-padding-xl-h: $btn-padding-xl-h !default;  // 1.6rem
-
-// Table cell heights - button height + size-specific buffer
-$table-cell-height-buffer-xs: 0.7rem !default;
-$table-cell-height-buffer-sm: 0.8rem !default;
-$table-cell-height-buffer-lg: 0.8rem !default;
-$table-cell-height-buffer-xl: 0.8rem !default;
-
-$table-cell-height-xs: $btn-height-xs + $table-cell-height-buffer-xs !default;
-$table-cell-height: $btn-height-base + $table-cell-height-buffer-sm !default;
-$table-cell-height-sm: $btn-height-sm + $table-cell-height-buffer-sm !default;
-$table-cell-height-lg: $btn-height-lg + $table-cell-height-buffer-lg !default;
-$table-cell-height-xl: $btn-height-xl + $table-cell-height-buffer-xl !default;
-
-// Virtual table (for large datasets)
-$virtual-table-cell-padding-v: 0.5rem !default;  // 5px (was 0.3rem)
-$virtual-table-cell-padding-h: 0.8rem !default;  // 8px (was 0.5rem)
-
-// Responsive table system
-$table-responsive-breakpoint: $mobile-breakpoint !default;
-$table-responsive-card-margin: $spacing-base !default;
-$table-responsive-card-padding: $spacing-md !default;
-$table-responsive-label-width: 40% !default;
-$table-responsive-label-font-weight: $font-weight-semibold !default;
-
-// ============================================================================
-// FORM SYSTEM
-// ============================================================================
-$form-scale: 0.8rem !default;              // 8px (was 0.5rem)
-$form-group-margin-bottom: $spacing-sm !default;
-$form-label-margin-bottom: 0.3rem !default;   // ~3px (was 0.2rem)
-$form-help-margin-top: $spacing-xs !default;
-$input-padding-v: $spacing-sm !default;       // 0.8rem = 8px
-$input-padding-xs-v: 0.6rem !default;         // 6px
-$input-padding-h: $spacing-sm !default;       // 0.8rem = 8px
-$select-padding-v: 0.7rem !default;           // 7px
-$select-padding-h: 0.5rem !default;           // 5px - aligns options with inputs
-$textarea-min-height: 9.6rem !default;        // 96px (was 6rem)
-$input-focus-ring-opacity: 0.1 !default;
-$input-focus-border-color: $accent-color !default;
-$select-focus-border-color: $accent-color !default;
-$textarea-focus-border-color: $accent-color !default;
-$input-group-prepend-bg: $secondary-bg !default;
-$input-group-prepend-text: $text-color-2 !default;
-$input-group-append-bg: $secondary-bg !default;
-$input-group-append-text: $text-color-2 !default;
-$checkbox-margin-top: 0.2rem !default;        // 2px (was 0.125rem)
-$checkbox-size-xs: 1.2rem !default;           // 12px (was 0.75rem)
-$checkbox-size-sm: 1.4rem !default;           // 14px (was 0.875rem)
-$checkbox-size: 1.6rem !default;              // 16px (was 1rem)
-$checkbox-size-lg: 2rem !default;             // 20px (was 1.25rem)
-$checkbox-size-xl: 2.4rem !default;           // 24px (was 1.5rem)
-$form-group-margin-compact: 1.2rem !default;  // 12px (was 0.75rem)
-
-// Custom checkbox appearance (tri-state support)
-$checkbox-border-radius: $border-radius !default;         // Match input border-radius
-$checkbox-border-width: $border-width-base !default;      // 1px
-$checkbox-border-color: $border-color !default;           // Default border
-$checkbox-border-color-hover: $accent-color !default;     // Hover border
-$checkbox-border-color-checked: $accent-color !default;   // Checked border
-$checkbox-bg: $card-bg !default;                          // Unchecked background
-$checkbox-bg-checked: $accent-color !default;             // Checked background
-$checkbox-bg-indeterminate: $accent-color !default;       // Indeterminate background
-$checkbox-checkmark-color: white !default;                // Checkmark/dash color
-$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25) !default;
-$checkbox-transition: $transition-fast !default;
-
-// ============================================================================
-// MULTISELECT SYSTEM
-// ============================================================================
-$multiselect-input-padding-v: $input-padding-v !default;
-$multiselect-input-padding-h: $input-padding-h !default;
-$multiselect-dropdown-bg: $card-bg !default;
-$multiselect-dropdown-border: $border-color !default;
-$multiselect-dropdown-text: $text-color-1 !default;
-$multiselect-dropdown-shadow: $shadow-lg !default;
-$multiselect-dropdown-max-height: 32rem !default;  // 320px (was 20rem)
-$multiselect-hint-bg: $main-bg !default;
-$multiselect-hint-border: $border-color !default;
-$multiselect-hint-padding: $spacing-sm !default;
-$multiselect-option-padding-v: $spacing-sm !default;
-$multiselect-option-padding-h: $spacing-md !default;
-$multiselect-option-hover-bg: $main-bg !default;
-$multiselect-pill-bg: $accent-light !default;
-$multiselect-pill-border: $accent-color !default;
-$multiselect-pill-padding: $spacing-xs $spacing-sm !default;
-$multiselect-pill-gap: $spacing-xs !default;
-$multiselect-selected-popover-width: 32rem !default;  // 320px (was 20rem)
-
-// ============================================================================
-// ALERT SYSTEM
-// ============================================================================
-$alert-padding-v: $card-footer-padding-v !default;
-$alert-padding-h: $card-footer-padding-h !default;
-$alert-dismissible-padding-right: 4.8rem !default;   // 48px (was 3rem)
-$alert-close-opacity: $opacity-muted !default;
-$alert-icon-margin: $spacing-sm !default;
-$alert-list-padding-left: $spacing-lg !default;
-$alert-list-item-margin-top: $card-footer-padding-v !default;
-
-// Alert colors - Now derived via color-mix() mixins in _base-css-variables.scss
-// Themes call output-pa-alert-variables-light/dark instead of hardcoding values
-// Keep only the text transform variable as it's not color-related
-$alert-danger-text-transform: none !default;
-
-// ============================================================================
-// CALLOUT SYSTEM
-// ============================================================================
-$callout-border-width: 0.4rem !default;  // 4px left border accent
-
-// ============================================================================
-// STATS SYSTEM
-// ============================================================================
-$stat-icon-size: 4.8rem !default;          // 48px (was 3rem)
-$stat-square-min-size: 12.8rem !default;   // 128px (was 8rem)
-$stat-label-letter-spacing: 0.05em !default;
-$stat-change-margin-bottom: 0.4rem !default; // 4px (was 0.25rem)
-$stat-number-margin-bottom: $spacing-xs !default;
-$stat-symbol-opacity: $opacity-shadow !default;
-
-// Stat square clamp values (10px base)
-$stat-square-number-min: 4.8rem !default;    // 48px (was 3rem)
-$stat-square-number-scale: 8vw !default;
-$stat-square-number-max: 7.2rem !default;    // 72px (was 4.5rem)
-$stat-square-symbol-min: 6.4rem !default;    // 64px (was 4rem)
-$stat-square-symbol-scale: 10vw !default;
-$stat-square-symbol-max: 9.6rem !default;    // 96px (was 6rem)
-
-// Stat shadow values
-$stat-text-shadow-1-y: 4px !default;
-$stat-text-shadow-1-blur: 8px !default;
-$stat-text-shadow-2-y: 2px !default;
-$stat-text-shadow-2-blur: 4px !default;
-$stat-drop-shadow-y: 2px !default;
-$stat-drop-shadow-blur: 4px !default;
-
-// ============================================================================
-// DASHBOARD & CHARTS
-// ============================================================================
-$chart-height: 400px !default;
-$dashboard-grid-col-sm: 80px !default;
-$dashboard-grid-col-md: 100px !default;
-$dashboard-grid-col-lg: 120px !default;
-
-// ============================================================================
-// SPINNER/LOADER SYSTEM
-// ============================================================================
-$spinner-size: 1.6rem !default;            // 16px (was 1rem)
-$spinner-border-width: 2px !default;
-$loader-border-width: 3px !default;
-$loader-dot-size: 1.2rem !default;         // 12px (was 0.75rem)
-$loader-bar-width: $spacing-xs !default;
-$loader-bar-height: $spacing-lg !default;
-$loader-animation-opacity-min: $opacity-muted !default;
-$loader-overlay-bg: rgba(255, 255, 255, 0.8) !default;
-
-// Loader animation delays
-$loader-dots-delay-1: -0.32s !default;
-$loader-dots-delay-2: -0.16s !default;
-$loader-bars-delay-1: -1.2s !default;
-$loader-bars-delay-2: -1.1s !default;
-$loader-bars-delay-3: -1.0s !default;
-$loader-bars-delay-4: -0.9s !default;
-$loader-bars-delay-5: -0.8s !default;
-
-// Loader animation properties
-$loader-pulse-duration: 1.2s !default;
-$loader-pulse-easing: cubic-bezier(0.5, 0, 0.5, 1) !default;
-
-// ============================================================================
-// TABS SYSTEM
-// ============================================================================
-$tabs-margin-bottom: $spacing-sm !default;
-$tabs-panel-padding-top: $spacing-sm !default;
-$tabs-vertical-icon-size: $sidebar-icon-size !default;
-$tabs-vertical-item-gap: $sidebar-item-gap !default;
-$tabs-pill-hover-opacity: 0.1 !default;
-$tabs-pill-border-opacity: 0.3 !default;
-$tabs-boxed-hover-opacity: 0.1 !default;
-$tabs-vertical-hover-opacity: 0.05 !default;
-$tabs-vertical-active-opacity: 0.1 !default;
-$tabs-scroll-btn-width: 3.2rem !default;   // 32px (was 2rem)
-$tabs-scroll-gradient-opacity: 0.95 !default;
-$tabs-scroll-hover-gradient-opacity: 0.8 !default;
-
-// ============================================================================
-// TOAST SYSTEM
-// ============================================================================
-$toast-min-width: 32rem !default;            // 320px (was 20rem)
-$toast-max-width: 40rem !default;            // 400px (was 25rem)
-$toast-padding-v: $spacing-md !default;
-$toast-padding-h: $spacing-md !default;
-$toast-icon-size: 3.2rem !default;           // 32px (was 2rem)
-$toast-close-size: 2.4rem !default;          // 24px (was 1.5rem)
-$toast-progress-height: 5px !default;
-
-// ============================================================================
-// TOOLTIP SYSTEM
-// ============================================================================
-$tooltip-arrow-size: 5px !default;
-$tooltip-distance: 8px !default;
-$tooltip-offset: 4px !default;
-$tooltip-max-width: 24rem !default;          // 240px (was 15rem)
-$tooltip-multiline-max-width: 32rem !default;  // 320px (was 20rem)
-$tooltip-multiline-width: 32rem !default;    // 320px (was 20rem)
-$tooltip-arrow-offset: 2px !default;
-$tooltip-z-index: $z-index-tooltip !default;
-
-// ============================================================================
-// POPOVER SYSTEM
-// ============================================================================
-$popover-min-width: 25.6rem !default;      // 256px (was 16rem)
-$popover-max-width: 32rem !default;        // 320px (was 20rem)
-$popover-arrow-size: 6px !default;
-$popover-distance: 8px !default;
-$popover-trigger-size: 2rem !default;        // 20px (was 1.25rem)
-$popover-close-size: $spacing-lg !default;
-$popover-header-padding-v: $spacing-sm !default;
-$popover-header-padding-h: $spacing-sm !default;
-$popover-header-padding-right: 0.3rem !default;  // ~3px (was 0.2rem)
-$popover-header-padding: $popover-header-padding-v $popover-header-padding-right $popover-header-padding-v $popover-header-padding-h !default;
-$popover-header-border: $border-width-base solid $border-color !default;
-$popover-header-border-radius: $border-radius $border-radius 0 0 !default;
-$popover-title-font-size: $font-size-lg !default;
-$popover-sm-min-width: 19.2rem !default;     // 192px (was 12rem)
-$popover-sm-max-width: 25.6rem !default;     // 256px (was 16rem)
-$popover-lg-min-width: 32rem !default;       // 320px (was 20rem)
-$popover-lg-max-width: 44.8rem !default;     // 448px (was 28rem)
-$popover-shift-offset: 3.2rem !default;      // 32px (was 2rem)
-$popover-z-index: $z-index-popover !default;
-
-// Popover code element styling (10px base)
-$popover-code-padding-v: 0.2rem !default;    // 2px (was 0.125rem)
-$popover-code-padding-h: 0.4rem !default;    // 4px (was 0.25rem)
-$popover-code-font-scale: 0.9em !default;
-
-// ============================================================================
-// COMMAND PALETTE SYSTEM
-// ============================================================================
-$command-palette-width: 60.8rem !default;    // 608px (was 38rem)
-$command-palette-offset-top: 12.8rem !default;  // 128px (was 8rem)
-$command-palette-border-radius: $border-radius !default;
-$command-palette-backdrop-bg: rgba(0, 0, 0, 0.5) !default;
-$command-palette-backdrop-blur: 4px !default;
-$command-palette-shadow: 0 1.6rem 4.8rem rgba(0, 0, 0, 0.3) !default;  // 16px 48px (was 1rem 3rem)
-$command-palette-input-padding-v: $input-padding-v !default;
-$command-palette-input-padding-h: $input-padding-h !default;
-$command-palette-input-font-size: $font-size-base !default;
-$command-palette-results-max-height: 38.4rem !default;  // 384px (was 24rem)
-$command-palette-empty-padding-v: $spacing-2xl !default;
-$command-palette-item-padding-v: $spacing-sm !default;
-$command-palette-item-hover-bg: rgba($accent-color, 0.05) !default;
-$command-palette-item-active-bg: rgba($accent-color, 0.1) !default;
-$command-palette-item-icon-size: 3.2rem !default;  // 32px (was 2rem)
-$command-palette-highlight-bg: rgba($accent-color, 0.2) !default;
-$command-palette-highlight-text: $accent-color !default;
-
-// ============================================================================
-// SETTINGS PANEL SYSTEM
-// ============================================================================
-$settings-panel-top: 15vh !default;
-$settings-panel-height: 70vh !default;
-$settings-panel-min-height: 400px !default;
-$settings-panel-vertical-clearance: 100px !default;
-$settings-panel-hover-offset: 5px !default;
-$settings-panel-transition-duration: 0.3s !default;
-$settings-panel-transition-easing: ease !default;
-
-// ============================================================================
-// PAGER SYSTEM
-// ============================================================================
-$pager-input-width: 6.4rem !default;         // 64px (was 4rem)
-$pager-controls-gap: $spacing-xs !default;
-$pager-button-margin: $spacing-base !default;
-
-// ============================================================================
-// TIMELINE SYSTEM
-// ============================================================================
-
-// Timeline - Simple variant (10px base)
-$timeline-simple-line-width: 1px !default;
-$timeline-simple-margin-left: 10px !default;
-$timeline-simple-padding-left: 20px !default;
-$timeline-simple-dot-size: 15px !default;
-$timeline-simple-dot-border: 1px !default;
-$timeline-simple-dot-offset: -30px !default;
-$timeline-simple-dot-shadow-offset-x: 3px !default;
-$timeline-simple-dot-shadow-offset-y: 3px !default;
-$timeline-simple-dot-shadow-blur: 0 !default;
-$timeline-simple-dot-shadow-opacity: 0.3 !default;
-$timeline-simple-content-margin-top: 0.6rem !default;  // 6px (was 0.4rem)
-$timeline-simple-scroll-container-max-height: 400px !default;
-$timeline-simple-scroll-loader-min-height: 60px !default;
-$timeline-simple-load-more-margin-top: 2.4rem !default;  // 24px (was 1.5rem)
-
-// Timeline Block - Alternating variant
-$timeline-block-max-width: 1140px !default;
-$timeline-block-padding: $spacing-base 0 !default;
-$timeline-block-line-width: $border-width-medium !default;
-$timeline-block-item-width: 50% !default;
-$timeline-block-item-padding: $spacing-base $spacing-xl !default;
-$timeline-block-item-padding-left-odd: 0rem !default;
-$timeline-block-item-padding-right-even: 0rem !default;
-$timeline-block-content-padding-v: $spacing-xl !default;
-$timeline-block-content-padding-h: $spacing-xl !default;
-$timeline-block-content-padding-extended: calc($spacing-xl * 2 + 40px) !default;
-$timeline-block-content-border-radius: 500px !default;
-$timeline-block-dot-size: 16px !default;
-$timeline-block-dot-border: 2px !default;
-$timeline-block-dot-top-offset: calc(50% - 8px) !default;
-$timeline-block-dot-horizontal-offset: -8px !default;
-$timeline-block-connector-width: 50px !default;
-$timeline-block-connector-height: 2px !default;
-$timeline-block-connector-top-offset: calc(50% - 1px) !default;
-$timeline-block-connector-horizontal-offset: 8px !default;
-$timeline-block-icon-size: 40px !default;
-$timeline-block-icon-border: 2px !default;
-$timeline-block-icon-top-offset: calc(50% - 20px) !default;
-$timeline-block-date-top-offset: calc(50% - 8px) !default;
-$timeline-block-date-offset: -75px !default;
-$timeline-block-date-letter-spacing: 1px !default;
-$timeline-block-icon-offset-odd: 56px !default;
-$timeline-block-icon-offset-even: 56px !default;
-$timeline-block-responsive-breakpoint: 767px !default;
-$timeline-block-responsive-line-left: 90px !default;
-$timeline-block-responsive-padding-left: 120px !default;
-$timeline-block-responsive-padding-right: $spacing-xl !default;
-$timeline-block-responsive-dot-left: 82px !default;
-$timeline-block-responsive-connector-left: 100px !default;
-$timeline-block-responsive-date-left: 15px !default;
-$timeline-block-responsive-icon-left: 146px !default;
-
-// Timeline - Feed variant (10px base)
-$timeline-feed-gap: $spacing-base !default;
-$timeline-feed-item-padding-bottom: $spacing-sm !default;
-$timeline-feed-border-left: 3px !default;
-$timeline-feed-padding-left: 40px !default;
-$timeline-feed-icon-size: 40px !default;
-$timeline-feed-icon-margin-left: -52px !default;
-$timeline-feed-icon-box-shadow-width: 6px !default;
-$timeline-feed-avatar-size: 28px !default;
-$timeline-feed-avatar-margin-right: $spacing-xs !default;
-$timeline-feed-comment-margin-top: $spacing-sm !default;
-$timeline-feed-comment-padding: $spacing-base !default;
-$timeline-feed-date-icon-size: $spacing-base !default;
-$timeline-feed-date-label-font-size: $font-size-sm !default;
-$timeline-feed-date-label-letter-spacing: 0.5px !default;
-$timeline-feed-date-margin-bottom: $spacing-sm !default;
-$timeline-feed-time-width: 50px !default;
-$timeline-feed-time-font-size: $font-size-xs !default;
-$timeline-feed-time-padding-top: 6px !default;
-$timeline-feed-scroll-container-max-height: 400px !default;
-
-// ============================================================================
-// DATA DISPLAY (READ-ONLY FIELDS)
-// ============================================================================
-$field-label-font-size: $font-size-xs !default;
-$field-label-font-weight: $font-weight-semibold !default;
-$field-label-opacity: 0.55 !default;
-$field-label-letter-spacing: 0.05em !default;
-$field-value-font-size: $font-size-sm !default;
-$field-gap: $spacing-xs !default;
-$field-horizontal-label-min-width: 8rem !default;
-$field-horizontal-label-max-width: 40% !default;
-
-// Copyable field interactions
-$field-copy-padding: 0.4rem !default;
-$field-copy-opacity: 0.5 !default;
-$field-copy-hover-opacity: 1 !default;
-$field-copy-hover-bg: rgba(128, 128, 128, 0.1) !default;
-$field-copy-transition: 0.15s !default;
-$field-copy-click-hover-opacity: 0.7 !default;
-$field-copy-hint-opacity: 0.6 !default;
-
-$fields-gap: $spacing-base !default;
-$fields-relaxed-gap: $spacing-lg !default;
-$fields-bordered-padding: $spacing-sm !default;
-$fields-bordered-border-color: $border-color !default;
-$fields-striped-bg: $table-stripe !default;
-$fields-cols-gap: $spacing-base !default;
-$fields-border-left: 3px solid $accent-color !default;
-$fields-padding-left: $spacing-base !default;
-$fields-filled-bg: rgba(128, 128, 128, 0.06) !default;
-$fields-filled-padding: $spacing-base !default;
-
-// Field group (labeled section of fields)
-$field-group-gap: $spacing-sm !default;
-$field-group-title-font-size: $font-size-sm !default;
-$field-group-title-font-weight: $font-weight-semibold !default;
-$field-group-title-border-color: $border-color !default;
-$field-group-spacing: $spacing-lg !default;
-
-// Descriptions Table (pa-desc-table)
-$desc-table-cols: 3 !default;
-$desc-table-cell-padding-v: 1.2rem !default;
-$desc-table-cell-padding-h: 1.6rem !default;
-$desc-table-font-size: $font-size-sm !default;
-$desc-table-label-bg: $fields-filled-bg !default;
-$desc-table-label-colon-spacing: 2px !default;
-$desc-table-value-font-weight: $font-weight-medium !default;
-$desc-table-label-fixed-width: 14rem !default;
-
-// Dot Leaders (pa-dot-leaders)
-$dot-leaders-item-padding-v: 0.6rem !default;
-$dot-leaders-font-size: $font-size-sm !default;
-$dot-leaders-label-font-weight: $font-weight-medium !default;
-$dot-leaders-value-font-weight: $font-weight-semibold !default;
-$dot-leaders-leader-width: 2px !default;
-$dot-leaders-leader-margin: 0.8rem !default;
-$dot-leaders-leader-min-width: 2rem !default;
-$dot-leaders-total-margin-top: 0.4rem !default;
-$dot-leaders-total-padding-top: 0.8rem !default;
-$dot-leaders-total-border-width: 2px !default;
-$dot-leaders-total-font-size: $font-size-base !default;
-$dot-leaders-total-font-weight: $font-weight-bold !default;
-
-// Property Card (pa-prop-card)
-$prop-card-border-radius: 6px !default;
-$prop-card-header-padding-v: 1rem !default;
-$prop-card-header-padding-h: 1.6rem !default;
-$prop-card-header-font-size: 1.3rem !default;
-$prop-card-header-font-weight: $font-weight-semibold !default;
-$prop-card-header-letter-spacing: 0.04em !default;
-$prop-card-header-bg: rgba(128, 128, 128, 0.04) !default;
-$prop-card-row-padding-v: 1rem !default;
-$prop-card-row-padding-h: 1.6rem !default;
-$prop-card-row-font-size: $font-size-sm !default;
-$prop-card-row-gap: 1.6rem !default;
-$prop-card-row-divider-color: rgba(128, 128, 128, 0.08) !default;
-
-// Fields Linear modifier (pa-fields--linear)
-$fields-linear-gap: $spacing-sm !default;
-$fields-linear-font-size: $font-size-sm !default;
-$fields-linear-min-height: 2.8rem !default;
-$fields-linear-label-width: 10rem !default;
-$fields-linear-field-gap: 1.2rem !default;
-
-// Fields Chips modifier (pa-fields--chips)
-$fields-chips-gap-v: 0.6rem !default;
-$fields-chips-gap-h: 1.4rem !default;
-$fields-chips-padding-v: 0.4rem !default;
-$fields-chips-font-size: $font-size-sm !default;
-$fields-chips-field-gap: 0.5rem !default;
-$fields-chips-value-padding-v: 0.2rem !default;
-$fields-chips-value-padding-h: 0.8rem !default;
-$fields-chips-value-font-size: 1.3rem !default;
-$fields-chips-value-font-weight: $font-weight-medium !default;
-$fields-chips-value-bg: rgba(128, 128, 128, 0.1) !default;
-$fields-chips-value-border-radius: 4px !default;
-
-// Banded Rows (pa-banded)
-$banded-font-size: $font-size-sm !default;
-$banded-label-width: 14rem !default;
-$banded-label-width-narrow: 10rem !default;
-$banded-label-width-wide: 20rem !default;
-$banded-label-padding-v: 0.8rem !default;
-$banded-label-padding-h: 1.2rem !default;
-$banded-label-bg: $fields-filled-bg !default;
-$banded-label-font-weight: $font-weight-medium !default;
-$banded-value-padding-v: 0.8rem !default;
-$banded-value-padding-h: 1.2rem !default;
-
-// Accent Grid (pa-accent-grid)
-$accent-grid-min-col: 20rem !default;
-$accent-grid-gap: 0.8rem !default;
-$accent-grid-item-padding-v: 0.8rem !default;
-$accent-grid-item-padding-h: 1.2rem !default;
-$accent-grid-item-padding-start: 1.4rem !default;
-$accent-grid-border-width: 3px !default;
-$accent-grid-label-font-size: 1.1rem !default;
-$accent-grid-label-font-weight: $font-weight-medium !default;
-$accent-grid-label-letter-spacing: 0.03em !default;
-$accent-grid-label-margin-bottom: 0.2rem !default;
-$accent-grid-value-font-size: $font-size-md !default;
-$accent-grid-value-font-weight: $font-weight-semibold !default;
-$accent-grid-value-line-height: $line-height-tight !default;
-
-// ============================================================================
-// DATA VISUALIZATION COMPONENTS
-// ============================================================================
-
-// Progress bar (pa-progress)
-$progress-height: 0.8rem !default;           // 8px
-$progress-height-xs: 0.3rem !default;        // 3px
-$progress-height-sm: 0.5rem !default;        // 5px
-$progress-height-lg: 1.2rem !default;        // 12px
-$progress-bg: rgba(0, 0, 0, 0.08) !default;
-$progress-border-radius: $border-radius !default;
-$progress-stripe-angle: 45deg !default;
-$progress-stripe-size: 1.6rem !default;      // 16px
-$progress-animation-duration: 1s !default;
-$progress-label-font-size: $font-size-xs !default;
-$progress-label-font-weight: $font-weight-medium !default;
-
-// Stacked bar (pa-stacked-bar)
-$stacked-bar-height: 1.2rem !default;        // 12px
-$stacked-bar-border-radius: $border-radius !default;
-$stacked-bar-legend-gap: $spacing-base !default;
-$stacked-bar-legend-swatch-size: 1rem !default;  // 10px
-$stacked-bar-legend-font-size: $font-size-xs !default;
-
-// Progress ring (pa-progress-ring)
-$progress-ring-size: 8rem !default;          // 80px
-$progress-ring-size-sm: 5rem !default;       // 50px
-$progress-ring-size-lg: 11rem !default;      // 110px
-$progress-ring-track-color: rgba(0, 0, 0, 0.08) !default;
-$progress-ring-value-font-size: $font-size-lg !default;
-$progress-ring-value-font-weight: $font-weight-bold !default;
-$progress-ring-label-font-size: $font-size-2xs !default;
-
-// Gauge (pa-gauge)
-$gauge-size: 12rem !default;                 // 120px
-$gauge-track-color: rgba(0, 0, 0, 0.08) !default;
-$gauge-label-font-size: $font-size-xs !default;
-$gauge-value-font-size: $font-size-2xl !default;
-$gauge-value-font-weight: $font-weight-bold !default;
-
-// Data bar (pa-data-bar)
-$data-bar-height: 0.4rem !default;           // 4px
-$data-bar-border-radius: $border-radius-sm !default;
-$data-bar-bg: rgba(0, 0, 0, 0.06) !default;
-
-// Heatmap (pa-heatmap)
-$heatmap-cell-size: 1.2rem !default;         // 12px
-$heatmap-gap: 0.2rem !default;               // 2px
-$heatmap-border-radius: $border-radius-sm !default;
-$heatmap-legend-gap: $spacing-xs !default;
-$heatmap-legend-font-size: $font-size-xs !default;
-
-// Sparkline (pa-sparkline)
-$sparkline-bar-width: 0.3rem !default;       // 3px
-$sparkline-height: 3rem !default;            // 30px
-$sparkline-gap: 0.2rem !default;             // 2px
-$sparkline-border-radius: $border-radius-sm !default;
-
-// Bar list (pa-bar-list)
-$bar-list-gap: $spacing-base !default;
-$bar-list-bar-height: 0.4rem !default;
-$bar-list-bar-border-radius: $border-radius-sm !default;
-$bar-list-bar-bg: rgba(0, 0, 0, 0.06) !default;
-$bar-list-label-font-size: $font-size-sm !default;
-$bar-list-value-font-size: $font-size-sm !default;
-$bar-list-value-font-weight: $font-weight-semibold !default;
+// ============================================================================
+// COMPONENT VARIABLES
+// Component-specific dimensions, paddings, and settings
+// ============================================================================
+
+// NOTE: All base, layout, typography, spacing, colors, and system variables
+// are available in global scope via @import in _index.scss
+// No @use needed since we use @import for proper !default cascading
+
+// NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
+
+// ============================================================================
+// BADGE SYSTEM
+// ============================================================================
+$badge-padding-v: 0.2rem !default;         // 2px (was 0.125rem)
+$badge-padding-h: 0.8rem !default;         // 8px (was 0.5rem)
+
+// Composite badge dimensions
+$composite-badge-icon-width: 3.2rem !default;    // 32px (was 2rem)
+$composite-badge-height: 2.8rem !default;        // 28px (was 1.75rem)
+$composite-badge-label-padding: 0.8rem !default; // 8px (was 0.5rem)
+$composite-badge-button-width: 2.4rem !default;  // 24px (was 1.5rem)
+$composite-badge-min-label-width: 4.8rem !default; // 48px (was 3rem)
+
+// Badge group
+$badge-group-gap: 0.8rem !default;         // 8px (was 0.5rem)
+$badge-group-visible-limit: 5 !default;
+
+// Badge colors
+$badge-success-bg: $success-text-light !default;
+$badge-success-text: $success-text !default;
+$badge-warning-bg: $warning-text-light !default;
+$badge-warning-text: $warning-text !default;
+$badge-info-bg: $info-text-light !default;
+$badge-info-text: $info-text !default;
+$badge-danger-bg: $danger-text-light !default;
+$badge-danger-text: $danger-text !default;
+$badge-pill-radius: 50rem !default;
+
+// Composite badge colors
+$composite-badge-icon-bg: $btn-secondary-bg !default;
+$composite-badge-label-bg: $secondary-light-bg !default;
+$composite-badge-label-text: $secondary-light-text !default;
+$composite-badge-label-hover-bg: $secondary-lighter-bg !default;
+
+// ============================================================================
+// BUTTON SYSTEM
+// ============================================================================
+$btn-group-gap: 0.3rem !default;           // 3px - default gap (use gap-* utilities for other sizes)
+
+// Button specific - vertical padding matches input padding for height alignment
+$btn-padding-v: 0.8rem !default;           // 8px - matches input default
+$btn-padding-h: 1.2rem !default;           // 12px
+$btn-padding-xs-v: 0.6rem !default;        // 6px - matches input-xs
+$btn-padding-xs-h: 0.8rem !default;        // 8px
+$btn-padding-sm-v: 0.8rem !default;        // 8px - matches input default
+$btn-padding-sm-h: 1rem !default;          // 10px
+$btn-padding-lg-v: 0.8rem !default;        // 8px - matches input default
+$btn-padding-lg-h: 1.4rem !default;        // 14px
+$btn-padding-xl-v: 0.8rem !default;        // 8px - matches input default
+$btn-padding-xl-h: 1.6rem !default;        // 16px
+$btn-border-width: 1px !default;
+$btn-icon-margin: 0.8rem !default;         // 8px (was 0.5rem)
+$btn-min-width: 9.6rem !default;           // 96px (was 6rem)
+
+// Button fixed-width utilities (10px base)
+$btn-width-1x: 1.6rem !default;            // 16px (was 1rem)
+$btn-width-2x: 3.2rem !default;            // 32px (was 2rem)
+$btn-width-3x: 4.8rem !default;            // 48px (was 3rem)
+$btn-width-4x: 6.4rem !default;            // 64px (was 4rem)
+$btn-width-5x: 8rem !default;              // 80px (was 5rem)
+$btn-width-6x: 9.6rem !default;            // 96px (was 6rem)
+$btn-width-7x: 11.2rem !default;           // 112px (was 7rem)
+$btn-width-8x: 12.8rem !default;           // 128px (was 8rem)
+$btn-width-9x: 14.4rem !default;           // 144px (was 9rem)
+$btn-width-10x: 16rem !default;            // 160px (was 10rem)
+
+// Button interaction
+$btn-hover-lift: -1px !default;
+$btn-hover-brightness: 0.9 !default;
+$btn-disabled-opacity: $opacity-disabled !default;
+$btn-focus-ring-opacity: 0.25 !default;
+
+// Button heights - aligned with input heights (source of truth from _base.scss)
+// These are used for icon-only buttons and table cell heights
+$btn-height-xs: #{$base-input-size-xs-height}rem !default;   // 31px
+$btn-height-sm: #{$base-input-size-sm-height}rem !default;   // 33px
+$btn-height-base: #{$base-input-size-md-height}rem !default; // 35px
+$btn-height-lg: #{$base-input-size-lg-height}rem !default;   // 38px
+$btn-height-xl: #{$base-input-size-xl-height}rem !default;   // 41px
+
+// Icon-only button sizes - match button heights (aligned with inputs)
+$btn-icon-only-size-xs: $btn-height-xs !default;
+$btn-icon-only-size-sm: $btn-height-sm !default;
+$btn-icon-only-size: $btn-height-base !default;
+$btn-icon-only-size-lg: $btn-height-lg !default;
+$btn-icon-only-size-xl: $btn-height-xl !default;
+
+// ============================================================================
+// MODAL SYSTEM
+// ============================================================================
+$modal-overlay-bg: rgba(0, 0, 0, 0.5) !default;
+$modal-content-bg: #ffffff !default;
+$modal-header-padding-v: 1.2rem !default;  // 12px (was 0.75rem)
+$modal-header-padding-h: 1.6rem !default;  // 16px (was 1rem)
+$modal-header-padding: $modal-header-padding-v $modal-header-padding-h !default;
+$modal-body-padding-v: 1.2rem !default;    // 12px (was 0.75rem)
+$modal-body-padding-h: 1.6rem !default;    // 16px (was 1rem)
+$modal-body-padding: $modal-body-padding-v $modal-body-padding-h !default;
+$modal-footer-padding-v: 1.2rem !default;  // 12px (was 0.75rem)
+$modal-footer-padding-h: 1.6rem !default;  // 16px (was 1rem)
+$modal-footer-padding: $modal-footer-padding-v $modal-footer-padding-h !default;
+$modal-sm-width: 32rem !default;           // 320px (was 20rem)
+$modal-md-width: 48rem !default;           // 480px (was 30rem)
+$modal-lg-width: 80rem !default;           // 800px (was 50rem)
+$modal-xl-width: 112rem !default;          // 1120px (was 70rem)
+$modal-xxl-width: 144rem !default;         // 1440px (was 90rem)
+$modal-fw-margin: 1.6rem !default;         // 16px (was 1rem)
+$modal-border-radius: 4px !default;
+$modal-close-font-size: $font-size-lg !default;
+$modal-title-font-size: $font-size-lg !default;
+$modal-box-shadow: 0 0.4rem $spacing-sm rgba(0, 0, 0, 0.1) !default;
+$modal-close-size: 4rem !default;            // 40px (was 2.5rem)
+$modal-body-scrollable-max-height: 60vh !default;
+$modal-mobile-margin: $spacing-sm !default;
+$modal-mobile-max-height: 95vh !default;
+$modal-header-hover-overlay: rgba(255, 255, 255, 0.1) !default;
+$modal-close-hover-opacity: $opacity-hover !default;
+$modal-close-border-width: $border-width-base !default;
+
+// ============================================================================
+// PROFILE PANEL SYSTEM
+// ============================================================================
+$profile-panel-width: 20vw !default;
+$profile-panel-max-width: 48rem !default;  // 480px (was 30rem)
+$profile-panel-width-fixed: 320px !default;
+$profile-panel-toggle-size: 40px !default;
+$profile-panel-toggle-size-open: 45px !default;
+$profile-avatar-size: 6.4rem !default;       // 64px (was 4rem)
+$profile-close-size: 3.2rem !default;        // 32px (was 2rem)
+$profile-nav-icon-width: $sidebar-icon-size !default;
+$profile-section-gap: $spacing-xl !default;
+$profile-overlay-bg: rgba(0, 0, 0, 0.3) !default;
+$profile-button-padding-v: $spacing-sm !default;
+$profile-button-padding-h: $spacing-md !default;
+$profile-role-letter-spacing: 0.5px !default;
+$profile-panel-mobile-max-width: 40rem !default;  // 400px (was 25rem)
+$profile-panel-content-padding: 1.6rem !default;  // Matches sidebar-padding horizontal (16px)
+
+// ============================================================================
+// DETAIL PANEL SYSTEM
+// ============================================================================
+$detail-panel-width: 40rem !default;
+$detail-panel-min-width: 28rem !default;
+$detail-panel-max-width: 64rem !default;
+$detail-panel-mobile-width: 90vw !default;
+$detail-panel-header-padding-v: 1.2rem !default;
+$detail-panel-header-padding-h: 1.6rem !default;
+$detail-panel-body-padding-v: 1.2rem !default;
+$detail-panel-body-padding-h: 1.6rem !default;
+$detail-panel-footer-padding-v: 1.2rem !default;
+$detail-panel-footer-padding-h: 1.6rem !default;
+$detail-panel-overlay-bg: rgba(0, 0, 0, 0.3) !default;
+$detail-panel-z-index: 4500 !default;
+$detail-panel-shadow: $shadow-profile-panel !default;
+$detail-panel-close-size: 3.2rem !default;
+$detail-panel-resize-handle-width: 6px !default;
+$detail-panel-selected-bg: rgba($accent-color, 0.08) !default;
+
+// ============================================================================
+// CARD SYSTEM
+// ============================================================================
+$card-border-width: $border-width-base !default;  // Card outer border (themes can override)
+$card-border-radius: $border-radius-lg !default;  // Controls card + header corners
+$card-body-padding-v: 1.6rem !default;     // 16px vertical
+$card-body-padding-h: 1rem !default;       // 10px horizontal
+$card-header-padding-v: 0.5rem !default;   // 5px vertical
+$card-header-padding-h: 1rem !default;     // 10px horizontal - matches body
+$card-header-min-height: 4rem !default;    // 40px - fits xs buttons (32px) with padding
+$card-footer-padding-v: 1.2rem !default;   // 12px vertical
+$card-footer-padding-h: 1rem !default;     // 10px horizontal - matches body
+$card-grid-min-width: 280px !default;
+$card-stat-padding-v: $spacing-lg !default;
+$card-stat-padding-h: $spacing-base !default;
+
+// Card inline tabs (tabs inside header)
+$card-tab-inline-padding-v: 0.3rem !default;   // 3px - compact for header
+$card-tab-inline-padding-h: 0.8rem !default;   // 8px
+$card-tab-hover-opacity: 0.1 !default;
+
+// ============================================================================
+// TABLE SYSTEM
+// ============================================================================
+// Table base padding (matches button/input default)
+$table-padding-base-v: 0.8rem !default;    // 8px - matches button SM/default
+$table-padding-base-h: 0.8rem !default;    // 8px
+
+// Table size variants - synchronized with button/input sizes
+$table-padding-xs-v: $btn-padding-xs-v !default;  // 0.6rem
+$table-padding-xs-h: $btn-padding-xs-h !default;  // 0.8rem
+$table-padding-sm-v: $btn-padding-sm-v !default;  // 0.8rem
+$table-padding-sm-h: $btn-padding-sm-h !default;  // 1rem
+$table-padding-lg-v: $btn-padding-lg-v !default;  // 0.8rem
+$table-padding-lg-h: $btn-padding-lg-h !default;  // 1.4rem
+$table-padding-xl-v: $btn-padding-xl-v !default;  // 0.8rem
+$table-padding-xl-h: $btn-padding-xl-h !default;  // 1.6rem
+
+// Table cell heights - button height + size-specific buffer
+$table-cell-height-buffer-xs: 0.7rem !default;
+$table-cell-height-buffer-sm: 0.8rem !default;
+$table-cell-height-buffer-lg: 0.8rem !default;
+$table-cell-height-buffer-xl: 0.8rem !default;
+
+$table-cell-height-xs: $btn-height-xs + $table-cell-height-buffer-xs !default;
+$table-cell-height: $btn-height-base + $table-cell-height-buffer-sm !default;
+$table-cell-height-sm: $btn-height-sm + $table-cell-height-buffer-sm !default;
+$table-cell-height-lg: $btn-height-lg + $table-cell-height-buffer-lg !default;
+$table-cell-height-xl: $btn-height-xl + $table-cell-height-buffer-xl !default;
+
+// Virtual table (for large datasets)
+$virtual-table-cell-padding-v: 0.5rem !default;  // 5px (was 0.3rem)
+$virtual-table-cell-padding-h: 0.8rem !default;  // 8px (was 0.5rem)
+
+// Responsive table system
+$table-responsive-breakpoint: $mobile-breakpoint !default;
+$table-responsive-card-margin: $spacing-base !default;
+$table-responsive-card-padding: $spacing-md !default;
+$table-responsive-label-width: 40% !default;
+$table-responsive-label-font-weight: $font-weight-semibold !default;
+
+// ============================================================================
+// FORM SYSTEM
+// ============================================================================
+$form-scale: 0.8rem !default;              // 8px (was 0.5rem)
+$form-group-margin-bottom: $spacing-sm !default;
+$form-label-margin-bottom: 0.3rem !default;   // ~3px (was 0.2rem)
+$form-help-margin-top: $spacing-xs !default;
+$input-padding-v: $spacing-sm !default;       // 0.8rem = 8px
+$input-padding-xs-v: 0.6rem !default;         // 6px
+$input-padding-h: $spacing-sm !default;       // 0.8rem = 8px
+$select-padding-v: 0.7rem !default;           // 7px
+$select-padding-h: 0.5rem !default;           // 5px - aligns options with inputs
+$textarea-min-height: 9.6rem !default;        // 96px (was 6rem)
+$input-focus-ring-opacity: 0.1 !default;
+$input-focus-border-color: $accent-color !default;
+$select-focus-border-color: $accent-color !default;
+$textarea-focus-border-color: $accent-color !default;
+$input-group-prepend-bg: $secondary-bg !default;
+$input-group-prepend-text: $text-color-2 !default;
+$input-group-append-bg: $secondary-bg !default;
+$input-group-append-text: $text-color-2 !default;
+$checkbox-margin-top: 0.2rem !default;        // 2px (was 0.125rem)
+$checkbox-size-xs: 1.2rem !default;           // 12px (was 0.75rem)
+$checkbox-size-sm: 1.4rem !default;           // 14px (was 0.875rem)
+$checkbox-size: 1.6rem !default;              // 16px (was 1rem)
+$checkbox-size-lg: 2rem !default;             // 20px (was 1.25rem)
+$checkbox-size-xl: 2.4rem !default;           // 24px (was 1.5rem)
+$form-group-margin-compact: 1.2rem !default;  // 12px (was 0.75rem)
+
+// Custom checkbox appearance (tri-state support)
+$checkbox-border-radius: $border-radius !default;         // Match input border-radius
+$checkbox-border-width: $border-width-base !default;      // 1px
+$checkbox-border-color: $border-color !default;           // Default border
+$checkbox-border-color-hover: $accent-color !default;     // Hover border
+$checkbox-border-color-checked: $accent-color !default;   // Checked border
+$checkbox-bg: $card-bg !default;                          // Unchecked background
+$checkbox-bg-checked: $accent-color !default;             // Checked background
+$checkbox-bg-indeterminate: $accent-color !default;       // Indeterminate background
+$checkbox-checkmark-color: white !default;                // Checkmark/dash color
+$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25) !default;
+$checkbox-transition: $transition-fast !default;
+
+// ============================================================================
+// MULTISELECT SYSTEM
+// ============================================================================
+$multiselect-input-padding-v: $input-padding-v !default;
+$multiselect-input-padding-h: $input-padding-h !default;
+$multiselect-dropdown-bg: $card-bg !default;
+$multiselect-dropdown-border: $border-color !default;
+$multiselect-dropdown-text: $text-color-1 !default;
+$multiselect-dropdown-shadow: $shadow-lg !default;
+$multiselect-dropdown-max-height: 32rem !default;  // 320px (was 20rem)
+$multiselect-hint-bg: $main-bg !default;
+$multiselect-hint-border: $border-color !default;
+$multiselect-hint-padding: $spacing-sm !default;
+$multiselect-option-padding-v: $spacing-sm !default;
+$multiselect-option-padding-h: $spacing-md !default;
+$multiselect-option-hover-bg: $main-bg !default;
+$multiselect-pill-bg: $accent-light !default;
+$multiselect-pill-border: $accent-color !default;
+$multiselect-pill-padding: $spacing-xs $spacing-sm !default;
+$multiselect-pill-gap: $spacing-xs !default;
+$multiselect-selected-popover-width: 32rem !default;  // 320px (was 20rem)
+
+// ============================================================================
+// ALERT SYSTEM
+// ============================================================================
+$alert-padding-v: $card-footer-padding-v !default;
+$alert-padding-h: $card-footer-padding-h !default;
+$alert-dismissible-padding-right: 4.8rem !default;   // 48px (was 3rem)
+$alert-close-opacity: $opacity-muted !default;
+$alert-icon-margin: $spacing-sm !default;
+$alert-list-padding-left: $spacing-lg !default;
+$alert-list-item-margin-top: $card-footer-padding-v !default;
+
+// Alert colors - Now derived via color-mix() mixins in _base-css-variables.scss
+// Themes call output-pa-alert-variables-light/dark instead of hardcoding values
+// Keep only the text transform variable as it's not color-related
+$alert-danger-text-transform: none !default;
+
+// ============================================================================
+// CALLOUT SYSTEM
+// ============================================================================
+$callout-border-width: 0.4rem !default;  // 4px left border accent
+
+// ============================================================================
+// STATS SYSTEM
+// ============================================================================
+$stat-icon-size: 4.8rem !default;          // 48px (was 3rem)
+$stat-square-min-size: 12.8rem !default;   // 128px (was 8rem)
+$stat-label-letter-spacing: 0.05em !default;
+$stat-change-margin-bottom: 0.4rem !default; // 4px (was 0.25rem)
+$stat-number-margin-bottom: $spacing-xs !default;
+$stat-symbol-opacity: $opacity-shadow !default;
+
+// Stat square clamp values (10px base)
+$stat-square-number-min: 4.8rem !default;    // 48px (was 3rem)
+$stat-square-number-scale: 8vw !default;
+$stat-square-number-max: 7.2rem !default;    // 72px (was 4.5rem)
+$stat-square-symbol-min: 6.4rem !default;    // 64px (was 4rem)
+$stat-square-symbol-scale: 10vw !default;
+$stat-square-symbol-max: 9.6rem !default;    // 96px (was 6rem)
+
+// Stat shadow values
+$stat-text-shadow-1-y: 4px !default;
+$stat-text-shadow-1-blur: 8px !default;
+$stat-text-shadow-2-y: 2px !default;
+$stat-text-shadow-2-blur: 4px !default;
+$stat-drop-shadow-y: 2px !default;
+$stat-drop-shadow-blur: 4px !default;
+
+// ============================================================================
+// DASHBOARD & CHARTS
+// ============================================================================
+$chart-height: 400px !default;
+$dashboard-grid-col-sm: 80px !default;
+$dashboard-grid-col-md: 100px !default;
+$dashboard-grid-col-lg: 120px !default;
+
+// ============================================================================
+// SPINNER/LOADER SYSTEM
+// ============================================================================
+$spinner-size: 1.6rem !default;            // 16px (was 1rem)
+$spinner-border-width: 2px !default;
+$loader-border-width: 3px !default;
+$loader-dot-size: 1.2rem !default;         // 12px (was 0.75rem)
+$loader-bar-width: $spacing-xs !default;
+$loader-bar-height: $spacing-lg !default;
+$loader-animation-opacity-min: $opacity-muted !default;
+$loader-overlay-bg: rgba(255, 255, 255, 0.8) !default;
+
+// Loader animation delays
+$loader-dots-delay-1: -0.32s !default;
+$loader-dots-delay-2: -0.16s !default;
+$loader-bars-delay-1: -1.2s !default;
+$loader-bars-delay-2: -1.1s !default;
+$loader-bars-delay-3: -1.0s !default;
+$loader-bars-delay-4: -0.9s !default;
+$loader-bars-delay-5: -0.8s !default;
+
+// Loader animation properties
+$loader-pulse-duration: 1.2s !default;
+$loader-pulse-easing: cubic-bezier(0.5, 0, 0.5, 1) !default;
+
+// ============================================================================
+// TABS SYSTEM
+// ============================================================================
+$tabs-margin-bottom: $spacing-sm !default;
+$tabs-panel-padding-top: $spacing-sm !default;
+$tabs-vertical-icon-size: $sidebar-icon-size !default;
+$tabs-vertical-item-gap: $sidebar-item-gap !default;
+$tabs-pill-hover-opacity: 0.1 !default;
+$tabs-pill-border-opacity: 0.3 !default;
+$tabs-boxed-hover-opacity: 0.1 !default;
+$tabs-vertical-hover-opacity: 0.05 !default;
+$tabs-vertical-active-opacity: 0.1 !default;
+$tabs-scroll-btn-width: 3.2rem !default;   // 32px (was 2rem)
+$tabs-scroll-gradient-opacity: 0.95 !default;
+$tabs-scroll-hover-gradient-opacity: 0.8 !default;
+
+// ============================================================================
+// TOAST SYSTEM
+// ============================================================================
+$toast-min-width: 32rem !default;            // 320px (was 20rem)
+$toast-max-width: 40rem !default;            // 400px (was 25rem)
+$toast-padding-v: $spacing-md !default;
+$toast-padding-h: $spacing-md !default;
+$toast-icon-size: 3.2rem !default;           // 32px (was 2rem)
+$toast-close-size: 2.4rem !default;          // 24px (was 1.5rem)
+$toast-progress-height: 5px !default;
+
+// ============================================================================
+// TOOLTIP SYSTEM
+// ============================================================================
+$tooltip-arrow-size: 5px !default;
+$tooltip-distance: 8px !default;
+$tooltip-offset: 4px !default;
+$tooltip-max-width: 24rem !default;          // 240px (was 15rem)
+$tooltip-multiline-max-width: 32rem !default;  // 320px (was 20rem)
+$tooltip-multiline-width: 32rem !default;    // 320px (was 20rem)
+$tooltip-arrow-offset: 2px !default;
+$tooltip-z-index: $z-index-tooltip !default;
+
+// ============================================================================
+// POPOVER SYSTEM
+// ============================================================================
+$popover-min-width: 25.6rem !default;      // 256px (was 16rem)
+$popover-max-width: 32rem !default;        // 320px (was 20rem)
+$popover-arrow-size: 6px !default;
+$popover-distance: 8px !default;
+$popover-trigger-size: 2rem !default;        // 20px (was 1.25rem)
+$popover-close-size: $spacing-lg !default;
+$popover-header-padding-v: $spacing-sm !default;
+$popover-header-padding-h: $spacing-sm !default;
+$popover-header-padding-right: 0.3rem !default;  // ~3px (was 0.2rem)
+$popover-header-padding: $popover-header-padding-v $popover-header-padding-right $popover-header-padding-v $popover-header-padding-h !default;
+$popover-header-border: $border-width-base solid $border-color !default;
+$popover-header-border-radius: $border-radius $border-radius 0 0 !default;
+$popover-title-font-size: $font-size-lg !default;
+$popover-sm-min-width: 19.2rem !default;     // 192px (was 12rem)
+$popover-sm-max-width: 25.6rem !default;     // 256px (was 16rem)
+$popover-lg-min-width: 32rem !default;       // 320px (was 20rem)
+$popover-lg-max-width: 44.8rem !default;     // 448px (was 28rem)
+$popover-shift-offset: 3.2rem !default;      // 32px (was 2rem)
+$popover-z-index: $z-index-popover !default;
+
+// Popover code element styling (10px base)
+$popover-code-padding-v: 0.2rem !default;    // 2px (was 0.125rem)
+$popover-code-padding-h: 0.4rem !default;    // 4px (was 0.25rem)
+$popover-code-font-scale: 0.9em !default;
+
+// ============================================================================
+// COMMAND PALETTE SYSTEM
+// ============================================================================
+$command-palette-width: 60.8rem !default;    // 608px (was 38rem)
+$command-palette-offset-top: 12.8rem !default;  // 128px (was 8rem)
+$command-palette-border-radius: $border-radius !default;
+$command-palette-backdrop-bg: rgba(0, 0, 0, 0.5) !default;
+$command-palette-backdrop-blur: 4px !default;
+$command-palette-shadow: 0 1.6rem 4.8rem rgba(0, 0, 0, 0.3) !default;  // 16px 48px (was 1rem 3rem)
+$command-palette-input-padding-v: $input-padding-v !default;
+$command-palette-input-padding-h: $input-padding-h !default;
+$command-palette-input-font-size: $font-size-base !default;
+$command-palette-results-max-height: 38.4rem !default;  // 384px (was 24rem)
+$command-palette-empty-padding-v: $spacing-2xl !default;
+$command-palette-item-padding-v: $spacing-sm !default;
+$command-palette-item-hover-bg: rgba($accent-color, 0.05) !default;
+$command-palette-item-active-bg: rgba($accent-color, 0.1) !default;
+$command-palette-item-icon-size: 3.2rem !default;  // 32px (was 2rem)
+$command-palette-highlight-bg: rgba($accent-color, 0.2) !default;
+$command-palette-highlight-text: $accent-color !default;
+
+// ============================================================================
+// SETTINGS PANEL SYSTEM
+// ============================================================================
+$settings-panel-top: 15vh !default;
+$settings-panel-height: 70vh !default;
+$settings-panel-min-height: 400px !default;
+$settings-panel-vertical-clearance: 100px !default;
+$settings-panel-hover-offset: 5px !default;
+$settings-panel-transition-duration: 0.3s !default;
+$settings-panel-transition-easing: ease !default;
+
+// ============================================================================
+// PAGER SYSTEM
+// ============================================================================
+$pager-input-width: 6.4rem !default;         // 64px (was 4rem)
+$pager-controls-gap: $spacing-xs !default;
+$pager-button-margin: $spacing-base !default;
+
+// ============================================================================
+// TIMELINE SYSTEM
+// ============================================================================
+
+// Timeline - Simple variant (10px base)
+$timeline-simple-line-width: 1px !default;
+$timeline-simple-margin-left: 10px !default;
+$timeline-simple-padding-left: 20px !default;
+$timeline-simple-dot-size: 15px !default;
+$timeline-simple-dot-border: 1px !default;
+$timeline-simple-dot-offset: -30px !default;
+$timeline-simple-dot-shadow-offset-x: 3px !default;
+$timeline-simple-dot-shadow-offset-y: 3px !default;
+$timeline-simple-dot-shadow-blur: 0 !default;
+$timeline-simple-dot-shadow-opacity: 0.3 !default;
+$timeline-simple-content-margin-top: 0.6rem !default;  // 6px (was 0.4rem)
+$timeline-simple-scroll-container-max-height: 400px !default;
+$timeline-simple-scroll-loader-min-height: 60px !default;
+$timeline-simple-load-more-margin-top: 2.4rem !default;  // 24px (was 1.5rem)
+
+// Timeline Block - Alternating variant
+$timeline-block-max-width: 1140px !default;
+$timeline-block-padding: $spacing-base 0 !default;
+$timeline-block-line-width: $border-width-medium !default;
+$timeline-block-item-width: 50% !default;
+$timeline-block-item-padding: $spacing-base $spacing-xl !default;
+$timeline-block-item-padding-left-odd: 0rem !default;
+$timeline-block-item-padding-right-even: 0rem !default;
+$timeline-block-content-padding-v: $spacing-xl !default;
+$timeline-block-content-padding-h: $spacing-xl !default;
+$timeline-block-content-padding-extended: calc($spacing-xl * 2 + 40px) !default;
+$timeline-block-content-border-radius: 500px !default;
+$timeline-block-dot-size: 16px !default;
+$timeline-block-dot-border: 2px !default;
+$timeline-block-dot-top-offset: calc(50% - 8px) !default;
+$timeline-block-dot-horizontal-offset: -8px !default;
+$timeline-block-connector-width: 50px !default;
+$timeline-block-connector-height: 2px !default;
+$timeline-block-connector-top-offset: calc(50% - 1px) !default;
+$timeline-block-connector-horizontal-offset: 8px !default;
+$timeline-block-icon-size: 40px !default;
+$timeline-block-icon-border: 2px !default;
+$timeline-block-icon-top-offset: calc(50% - 20px) !default;
+$timeline-block-date-top-offset: calc(50% - 8px) !default;
+$timeline-block-date-offset: -75px !default;
+$timeline-block-date-letter-spacing: 1px !default;
+$timeline-block-icon-offset-odd: 56px !default;
+$timeline-block-icon-offset-even: 56px !default;
+$timeline-block-responsive-breakpoint: 767px !default;
+$timeline-block-responsive-line-left: 90px !default;
+$timeline-block-responsive-padding-left: 120px !default;
+$timeline-block-responsive-padding-right: $spacing-xl !default;
+$timeline-block-responsive-dot-left: 82px !default;
+$timeline-block-responsive-connector-left: 100px !default;
+$timeline-block-responsive-date-left: 15px !default;
+$timeline-block-responsive-icon-left: 146px !default;
+
+// Timeline - Feed variant (10px base)
+$timeline-feed-gap: $spacing-base !default;
+$timeline-feed-item-padding-bottom: $spacing-sm !default;
+$timeline-feed-border-left: 3px !default;
+$timeline-feed-padding-left: 40px !default;
+$timeline-feed-icon-size: 40px !default;
+$timeline-feed-icon-margin-left: -52px !default;
+$timeline-feed-icon-box-shadow-width: 6px !default;
+$timeline-feed-avatar-size: 28px !default;
+$timeline-feed-avatar-margin-right: $spacing-xs !default;
+$timeline-feed-comment-margin-top: $spacing-sm !default;
+$timeline-feed-comment-padding: $spacing-base !default;
+$timeline-feed-date-icon-size: $spacing-base !default;
+$timeline-feed-date-label-font-size: $font-size-sm !default;
+$timeline-feed-date-label-letter-spacing: 0.5px !default;
+$timeline-feed-date-margin-bottom: $spacing-sm !default;
+$timeline-feed-time-width: 50px !default;
+$timeline-feed-time-font-size: $font-size-xs !default;
+$timeline-feed-time-padding-top: 6px !default;
+$timeline-feed-scroll-container-max-height: 400px !default;
+
+// ============================================================================
+// DATA DISPLAY (READ-ONLY FIELDS)
+// ============================================================================
+$field-label-font-size: $font-size-xs !default;
+$field-label-font-weight: $font-weight-semibold !default;
+$field-label-opacity: 0.55 !default;
+$field-label-letter-spacing: 0.05em !default;
+$field-value-font-size: $font-size-sm !default;
+$field-gap: $spacing-xs !default;
+$field-horizontal-label-min-width: 8rem !default;
+$field-horizontal-label-max-width: 40% !default;
+
+// Copyable field interactions
+$field-copy-padding: 0.4rem !default;
+$field-copy-opacity: 0.5 !default;
+$field-copy-hover-opacity: 1 !default;
+$field-copy-hover-bg: rgba(128, 128, 128, 0.1) !default;
+$field-copy-transition: 0.15s !default;
+$field-copy-click-hover-opacity: 0.7 !default;
+$field-copy-hint-opacity: 0.6 !default;
+
+$fields-gap: $spacing-base !default;
+$fields-relaxed-gap: $spacing-lg !default;
+$fields-bordered-padding: $spacing-sm !default;
+$fields-bordered-border-color: $border-color !default;
+$fields-striped-bg: $table-stripe !default;
+$fields-cols-gap: $spacing-base !default;
+$fields-border-left: 3px solid $accent-color !default;
+$fields-padding-left: $spacing-base !default;
+$fields-filled-bg: rgba(128, 128, 128, 0.06) !default;
+$fields-filled-padding: $spacing-base !default;
+
+// Field group (labeled section of fields)
+$field-group-gap: $spacing-sm !default;
+$field-group-title-font-size: $font-size-sm !default;
+$field-group-title-font-weight: $font-weight-semibold !default;
+$field-group-title-border-color: $border-color !default;
+$field-group-spacing: $spacing-lg !default;
+
+// Descriptions Table (pa-desc-table)
+$desc-table-cols: 3 !default;
+$desc-table-cell-padding-v: 1.2rem !default;
+$desc-table-cell-padding-h: 1.6rem !default;
+$desc-table-font-size: $font-size-sm !default;
+$desc-table-label-bg: $fields-filled-bg !default;
+$desc-table-label-colon-spacing: 2px !default;
+$desc-table-value-font-weight: $font-weight-medium !default;
+$desc-table-label-fixed-width: 14rem !default;
+
+// Dot Leaders (pa-dot-leaders)
+$dot-leaders-item-padding-v: 0.6rem !default;
+$dot-leaders-font-size: $font-size-sm !default;
+$dot-leaders-label-font-weight: $font-weight-medium !default;
+$dot-leaders-value-font-weight: $font-weight-semibold !default;
+$dot-leaders-leader-width: 2px !default;
+$dot-leaders-leader-margin: 0.8rem !default;
+$dot-leaders-leader-min-width: 2rem !default;
+$dot-leaders-total-margin-top: 0.4rem !default;
+$dot-leaders-total-padding-top: 0.8rem !default;
+$dot-leaders-total-border-width: 2px !default;
+$dot-leaders-total-font-size: $font-size-base !default;
+$dot-leaders-total-font-weight: $font-weight-bold !default;
+
+// Property Card (pa-prop-card)
+$prop-card-border-radius: 6px !default;
+$prop-card-header-padding-v: 1rem !default;
+$prop-card-header-padding-h: 1.6rem !default;
+$prop-card-header-font-size: 1.3rem !default;
+$prop-card-header-font-weight: $font-weight-semibold !default;
+$prop-card-header-letter-spacing: 0.04em !default;
+$prop-card-header-bg: rgba(128, 128, 128, 0.04) !default;
+$prop-card-row-padding-v: 1rem !default;
+$prop-card-row-padding-h: 1.6rem !default;
+$prop-card-row-font-size: $font-size-sm !default;
+$prop-card-row-gap: 1.6rem !default;
+$prop-card-row-divider-color: rgba(128, 128, 128, 0.08) !default;
+
+// Fields Linear modifier (pa-fields--linear)
+$fields-linear-gap: $spacing-sm !default;
+$fields-linear-font-size: $font-size-sm !default;
+$fields-linear-min-height: 2.8rem !default;
+$fields-linear-label-width: 10rem !default;
+$fields-linear-field-gap: 1.2rem !default;
+
+// Fields Chips modifier (pa-fields--chips)
+$fields-chips-gap-v: 0.6rem !default;
+$fields-chips-gap-h: 1.4rem !default;
+$fields-chips-padding-v: 0.4rem !default;
+$fields-chips-font-size: $font-size-sm !default;
+$fields-chips-field-gap: 0.5rem !default;
+$fields-chips-value-padding-v: 0.2rem !default;
+$fields-chips-value-padding-h: 0.8rem !default;
+$fields-chips-value-font-size: 1.3rem !default;
+$fields-chips-value-font-weight: $font-weight-medium !default;
+$fields-chips-value-bg: rgba(128, 128, 128, 0.1) !default;
+$fields-chips-value-border-radius: 4px !default;
+
+// Banded Rows (pa-banded)
+$banded-font-size: $font-size-sm !default;
+$banded-label-width: 14rem !default;
+$banded-label-width-narrow: 10rem !default;
+$banded-label-width-wide: 20rem !default;
+$banded-label-padding-v: 0.8rem !default;
+$banded-label-padding-h: 1.2rem !default;
+$banded-label-bg: $fields-filled-bg !default;
+$banded-label-font-weight: $font-weight-medium !default;
+$banded-value-padding-v: 0.8rem !default;
+$banded-value-padding-h: 1.2rem !default;
+
+// Accent Grid (pa-accent-grid)
+$accent-grid-min-col: 20rem !default;
+$accent-grid-gap: 0.8rem !default;
+$accent-grid-item-padding-v: 0.8rem !default;
+$accent-grid-item-padding-h: 1.2rem !default;
+$accent-grid-item-padding-start: 1.4rem !default;
+$accent-grid-border-width: 3px !default;
+$accent-grid-label-font-size: 1.1rem !default;
+$accent-grid-label-font-weight: $font-weight-medium !default;
+$accent-grid-label-letter-spacing: 0.03em !default;
+$accent-grid-label-margin-bottom: 0.2rem !default;
+$accent-grid-value-font-size: $font-size-md !default;
+$accent-grid-value-font-weight: $font-weight-semibold !default;
+$accent-grid-value-line-height: $line-height-tight !default;
+
+// ============================================================================
+// DATA VISUALIZATION COMPONENTS
+// ============================================================================
+
+// Progress bar (pa-progress)
+$progress-height: 0.8rem !default;           // 8px
+$progress-height-xs: 0.3rem !default;        // 3px
+$progress-height-sm: 0.5rem !default;        // 5px
+$progress-height-lg: 1.2rem !default;        // 12px
+$progress-bg: rgba(0, 0, 0, 0.08) !default;
+$progress-border-radius: $border-radius !default;
+$progress-stripe-angle: 45deg !default;
+$progress-stripe-size: 1.6rem !default;      // 16px
+$progress-animation-duration: 1s !default;
+$progress-label-font-size: $font-size-xs !default;
+$progress-label-font-weight: $font-weight-medium !default;
+
+// Stacked bar (pa-stacked-bar)
+$stacked-bar-height: 1.2rem !default;        // 12px
+$stacked-bar-border-radius: $border-radius !default;
+$stacked-bar-legend-gap: $spacing-base !default;
+$stacked-bar-legend-swatch-size: 1rem !default;  // 10px
+$stacked-bar-legend-font-size: $font-size-xs !default;
+
+// Progress ring (pa-progress-ring)
+$progress-ring-size: 8rem !default;          // 80px
+$progress-ring-size-sm: 5rem !default;       // 50px
+$progress-ring-size-lg: 11rem !default;      // 110px
+$progress-ring-track-color: rgba(0, 0, 0, 0.08) !default;
+$progress-ring-value-font-size: $font-size-lg !default;
+$progress-ring-value-font-weight: $font-weight-bold !default;
+$progress-ring-label-font-size: $font-size-2xs !default;
+
+// Gauge (pa-gauge)
+$gauge-size: 12rem !default;                 // 120px
+$gauge-track-color: rgba(0, 0, 0, 0.08) !default;
+$gauge-label-font-size: $font-size-xs !default;
+$gauge-value-font-size: $font-size-2xl !default;
+$gauge-value-font-weight: $font-weight-bold !default;
+
+// Data bar (pa-data-bar)
+$data-bar-height: 0.4rem !default;           // 4px
+$data-bar-border-radius: $border-radius-sm !default;
+$data-bar-bg: rgba(0, 0, 0, 0.06) !default;
+
+// Heatmap (pa-heatmap)
+$heatmap-cell-size: 1.2rem !default;         // 12px
+$heatmap-gap: 0.2rem !default;               // 2px
+$heatmap-border-radius: $border-radius-sm !default;
+$heatmap-legend-gap: $spacing-xs !default;
+$heatmap-legend-font-size: $font-size-xs !default;
+
+// Sparkline (pa-sparkline)
+$sparkline-bar-width: 0.3rem !default;       // 3px
+$sparkline-height: 3rem !default;            // 30px
+$sparkline-gap: 0.2rem !default;             // 2px
+$sparkline-border-radius: $border-radius-sm !default;
+
+// Bar list (pa-bar-list)
+$bar-list-gap: $spacing-base !default;
+$bar-list-bar-height: 0.4rem !default;
+$bar-list-bar-border-radius: $border-radius-sm !default;
+$bar-list-bar-bg: rgba(0, 0, 0, 0.06) !default;
+$bar-list-label-font-size: $font-size-sm !default;
+$bar-list-value-font-size: $font-size-sm !default;
+$bar-list-value-font-weight: $font-weight-semibold !default;