// _spacing.scss - Centralized spacing and sizing variables for the entire market_dashboard project

// ==========================================
// SPACING SCALE
// ==========================================
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-xxl: 24px;
$spacing-xxxl: 32px;

// Additional common spacing values
$spacing-2: 2px;
$spacing-6: 6px;
$spacing-10: 10px;
$spacing-15: 15px;
$spacing-22: 22px;

// ==========================================
// COMPONENT SIZING
// ==========================================
// Label widths for form controls
$label-width-xs: 60px;
$label-width-sm: 80px;
$label-width-md: 115px;
$label-width-lg: 150px;
$label-width-xl: 200px;

// Button sizing
$button-min-width-sm: 38px;
$button-min-width-md: 42px;
$button-min-width-lg: 48px;
$button-padding-sm: 6px 10px;
$button-padding-md: 8px 12px;
$button-padding-lg: 12px 16px;

// ==========================================
// LAYOUT DIMENSIONS
// ==========================================
// Header and navigation
$header-height: 70px;
$header-min-height: 70px;

// Sidebar dimensions
$sidebar-width: 18rem;
$sidebar-width-px: 288px;
$sidebar-collapsed-width: 4.5rem;
$sidebar-collapsed-width-px: 72px;
$sidebar-margin-collapsed: -15.5rem;
$sidebar-visible-width-collapsed: 16px;

// Container heights
$content-height: calc(100vh - #{$header-height});
$chart-height-default: 720px;
$chart-height-mobile: 400px;
$chart-height-tablet: 500px;
$chart-min-height: 300px;
$chart-min-height-mobile: 250px;

// Grid and table dimensions
$table-cell-padding: 8px;
$grid-gap: 6px;
$grid-gap-large: 12px;

// ==========================================
// BORDER WIDTHS
// ==========================================
$border-width-thin: 1px;
$border-width-medium: 2px;
$border-width-thick: 3px;

// ==========================================
// ICON SIZES
// ==========================================
$icon-size-xs: 10px;
$icon-size-sm: 12px;
$icon-size-md: 14px;
$icon-size-lg: 16px;
$icon-size-xl: 18px;
$icon-size-xxl: 22px;

// ==========================================
// FORM CONTROL DIMENSIONS
// ==========================================
$form-control-height: 38px;
$form-control-height-sm: 32px;
$form-control-height-lg: 44px;

// ==========================================
// MODAL AND OVERLAY DIMENSIONS
// ==========================================
$modal-max-width: 500px;
$modal-padding: 20px;
$overlay-z-offset: 1000;

// ==========================================
// RESPONSIVE HELPERS
// ==========================================
// Container max widths for different screen sizes
$container-sm: 540px;
$container-md: 720px;
$container-lg: 960px;
$container-xl: 1140px;
$container-xxl: 1320px;