@keenmate/pure-css 1.0.0-rc01

package/src/scss/variables/_components.scss

@@ -0,0 +1,835 @@
+// ============================================================================
+// 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-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
+// Vertical nudge that drops the (smaller) header description onto the title's
+// baseline. Under the header's center alignment a 16px title and 14px
+// description don't share a baseline, leaving the description ~1px high. The
+// exact correction is font-metric dependent, so it's exposed as a variable
+// (SCSS default here + `--pa-card-description-offset-y` at runtime) that themes
+// with a different font can retune. Set to 0 to disable the nudge entirely.
+$card-description-offset-y: 1px !default;
+$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;
+
+// Responsive actions — header width below which the spread button list
+// hides and the collapsed (split-button) form takes over. Default 28rem
+// = 280px, which fits a 3-button action set comfortably.
+$card-actions-collapse-at: 28rem !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
+// ============================================================================
+// Default alert padding — decoupled from $card-footer-padding so alerts
+// can have their own scale. The previous coupling left default with V
+// padding (1.2rem) bigger than --lg's (1rem) and H padding (1rem) equal
+// to --sm's, so default sat visually outside the size scale instead of
+// in the middle.
+$alert-padding-v: $spacing-md !default;        // 0.75rem
+$alert-padding-h: 1.25rem !default;            // sits between --sm (1rem) and --lg (1.5rem)
+
+// Size-modifier scales — themes can override to tighten/loosen each size
+// independently. V steps 0.5 → 0.75 → 1, H steps 1 → 1.25 → 1.5.
+$alert-padding-sm-v: $spacing-sm !default;     // 0.5rem
+$alert-padding-sm-h: $spacing-base !default;   // 1rem
+$alert-font-size-sm: $font-size-xs !default;   // 1.2rem (12px)
+$alert-padding-lg-v: $spacing-base !default;   // 1rem
+$alert-padding-lg-h: $spacing-lg !default;     // 1.5rem
+$alert-font-size-lg: $font-size-base !default; // 1.6rem (16px)
+
+$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: 0.85 !default;
+$stat-square-symbol-gap: 0.15em !default;   // tight gap between number and symbol on the same row
+
+// Stat square clamp values (10px base).
+// Scale uses `cqi` (container query inline-size, requires `container-type: inline-size`
+// on .pa-stat--square) so font tracks the tile width, not the viewport. Without this,
+// a wide-viewport / narrow-tile combination (e.g. 6 KPIs in a 33% column on 1920px)
+// hits the max font size and overflows multi-character values like "$847K" or "¥12.4M".
+//
+// Sizing budget: a 5-char number ("12.4M") at $stat-square-number-scale plus a 1-char
+// symbol at $stat-square-symbol-scale plus the inter-element gap should fit inside the
+// tile's content area (tile width minus 2× $spacing-lg padding) at typical tile widths
+// (~250–400px). Numbers are sized aggressively so the KPI reads as the dominant element.
+$stat-square-number-min: 3.2rem !default;    // 32px floor
+$stat-square-number-scale: 25cqi !default;   // 25% of tile width
+$stat-square-number-max: 7.2rem !default;    // 72px ceiling (was 9.6 — full-width tiles hit the ceiling and read as oversized banners; 72px keeps a wide tile readable without dominating the page)
+// Symbol is intentionally smaller than the number (visual hierarchy: number primary, unit secondary).
+$stat-square-symbol-min: 1.6rem !default;    // 16px floor (~50% of number-min)
+$stat-square-symbol-scale: 12cqi !default;   // 12% of tile width (~48% of number)
+$stat-square-symbol-max: 3.6rem !default;    // 36px ceiling (~50% of number-max, was 4.8)
+
+// Guard so a very wide tile (e.g. one square per full-width row instead of in a
+// 1/3 KPI column) can't grow into a page-dominating block. Caps how tall the
+// flex layout gets before the label is pushed to the bottom edge.
+$stat-square-max-height: 16rem !default;     // 160px
+
+// Stat square FIT mode (opt-in via [data-pa-stat-fit]) — progressive disclosure.
+// The number is sized to fill the box by pa-stat-fit.js (ResizeObserver); the
+// lower-priority rows reveal as the tile earns BOTH enough width and height.
+// NB: @container does NOT auto-interpolate Sass vars (unlike @media) — these
+// must be emitted with #{} in the rules. Gated on width AND height so a
+// wide-but-short banner doesn't reveal the tall-only tiers.
+$stat-square-fit-container-name: pa-stat !default;
+$stat-square-fit-meta-size:     $font-size-xs !default;  // no-JS fallback for the metadata
+                                                         // column; pa-stat-fit.js overrides it
+                                                         // inline with META_RATIO × number size
+$stat-square-fit-symbol-ratio:  0.5    !default;  // symbol = 0.5em of the number
+$stat-square-fit-symbol-min-w:  8rem   !default;  // P1 symbol reveals at…
+$stat-square-fit-symbol-min-h:  4.5rem !default;
+$stat-square-fit-label-min-w:   13rem  !default;  // P2 label
+$stat-square-fit-label-min-h:   6.5rem !default;
+$stat-square-fit-change-min-w:  18rem  !default;  // P3 trend
+$stat-square-fit-change-min-h:  9.5rem !default;
+$stat-square-fit-context-min-w: 24rem  !default;  // P4 context
+$stat-square-fit-context-min-h: 13rem  !default;
+
+// Horizontal "banner" arrangement: on wide tiles the number moves to the left
+// (filling the height) and the metadata stacks in a column to its right, so the
+// number stays dominant and the width isn't wasted. Auto-switches once the tile
+// is at least this wide (plain width query — broadest engine support).
+$stat-square-fit-horizontal-min-w: 32rem !default;  // ≥ this wide → horizontal banner
+$stat-square-fit-number-width:     44%   !default;  // number column share in horizontal
+
+// 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.5 !default;
+$timeline-simple-dot-border-radius: 30% !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: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) !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: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) !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: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) !default;
+$gauge-label-font-size: $font-size-xs !default;
+$gauge-value-font-size: $font-size-3xl !default;  // 2.8rem — value gets the whole donut hole (label is now below the gauge)
+$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;
+
+// ============================================================================
+// SPLITTER SYSTEM
+// ============================================================================
+$splitter-gutter-size: 0.6rem !default;                        // 6px gutter thickness
+$splitter-gutter-bg: rgba(128, 128, 128, 0.08) !default;
+$splitter-gutter-hover-bg: rgba(128, 128, 128, 0.18) !default;
+$splitter-gutter-active-bg: rgba($accent-color, 0.35) !default; // mid-drag
+$splitter-gutter-grip-length: 2.4rem !default;                 // 24px grip indicator
+$splitter-gutter-grip-thickness: 2px !default;
+$splitter-gutter-grip-color: rgba(128, 128, 128, 0.45) !default;
+$splitter-gutter-grip-hover-color: $accent-color !default;
+$splitter-focus-ring-color: rgba($accent-color, 0.4) !default;
+$splitter-focus-ring-width: 2px !default;
+$splitter-transition: background-color 0.15s ease !default;
+$splitter-pane-min-size: 0 !default;                           // absolute floor regardless of constraints
+$splitter-rail-size: 4rem !default;                            // 40px — start pane width when minimized to rail