/* ==========================================
   DIMENSIONS & SPACING
   ========================================== */

:root {
  /* Spacing Scale (based on 0.25rem = 4px) */
  --space-0: 0;
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */
  --space-16: 4rem;
  /* 64px */
  --space-20: 5rem;
  /* 80px */

  /* Border Radius - more modern, softer */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Component Heights */
  --height-button: 36px;
  --height-input: 40px;
  --height-nav-item: 40px;
  --height-header: 70px;

  /* Sidebar Dimensions */
  /* Sidebar is positioned at left: 0.75rem (12px) with these widths */
  /* margin-left = left offset (12px) + sidebar width */
  --sidebar-width: 272px;
  /* 12px offset + 260px width */
  --sidebar-width-collapsed: 92px;
  /* 12px offset + 80px width */
  --sidebar-mobile-width: 280px;

  /* Page Layout Spacing */
  --page-padding-x: 2.5rem;
  /* Horizontal padding for page content */
  --page-padding-y: 2.5rem;
  /* Vertical padding for page content */
  --page-padding-x-tablet: 2rem;
  --page-padding-y-tablet: 2rem;
  --page-padding-x-mobile: 1.25rem;
  --page-padding-y-mobile: 1.25rem;
  --page-max-width: 1200px;
  /* Maximum content width */
  --page-max-width-narrow: 800px;
  /* Narrow content width */

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* Z-index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 1000;
  --z-modal: 1001;
  --z-popover: 1002;
  --z-tooltip: 1003;

  /* Icon Sizes */
  --icon-xs: 16px;
  --icon-sm: 18px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* Button Sizes */
  --btn-padding-sm: 0.5rem 1rem;
  --btn-padding-md: 0.625rem 1.25rem;
  --btn-font-size: 0.95rem;
  --btn-font-size-sm: 0.875rem;
  --btn-height: 36px;
  --btn-height-sm: 32px;

  /* Icon Button Sizes */
  --btn-icon-sm: 32px;
  --btn-icon-md: 36px;
  --btn-icon-lg: 48px;

  /* Badge Sizes */
  --badge-padding: 0.25rem 0.625rem;
  --badge-font-size: 0.8rem;

  /* Semantic Spacing - Cards & Containers - more breathing room */
  --card-padding: 1.125rem;
  /* increased for more space */
  --card-padding-sm: 0.75rem;
  --card-gap: 0.75rem;
  --card-gap-lg: 1rem;

  /* Semantic Spacing - Sections - 20% more space */
  --section-gap: 1.5rem;
  /* increased from 1.25rem */
  --section-gap-sm: 1.125rem;
  /* increased from 0.875rem */
  --section-title-gap: var(--section-gap);
  /* Title-to-content spacing for section headers */

  /* Semantic Spacing - Elements */
  --element-gap: 0.375rem;
  /* Reduced from 0.5rem */
  --element-gap-sm: 0.25rem;
  /* Kept same */
  --element-gap-lg: 0.625rem;
  /* Reduced from 0.75rem */

  /* Semantic Spacing - Toolbar & Header */
  --toolbar-gap: 0.625rem;
  /* Reduced from 0.75rem */
  --toolbar-padding: 0.75rem;
  /* Reduced from 1rem */

  /* Semantic Spacing - Table */
  --table-cell-padding: 0.625rem 0.875rem;
  /* Reduced from 0.75rem 1rem */
  --table-cell-padding-sm: 0.5rem 0.75rem;
  /* Kept same */

  /* Tab Sizes */
  --tab-padding-y: 0.625rem;
  --tab-padding-x: 1rem;
  --tab-padding: var(--tab-padding-y) var(--tab-padding-x);
  /* Reduced from 0.75rem 1.25rem */
  --tab-font-size: 0.95rem;
  --tab-pill-height: calc((var(--tab-font-size) * 1.2) + (var(--tab-padding-y) * 2));

  /* Input Sizes */
  --input-padding: 0.625rem 0.875rem;
  /* Reduced from 0.75rem 1rem */
  --input-font-size: 0.95rem;

  /* Breakpoints (for reference in media queries) */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1280px;
}