/* ===================================================
   CENTRALIZED SPACING SYSTEM
   ===================================================
   
   This file provides a comprehensive spacing system for the Django application.
   It includes:
   - Base spacing scale using CSS custom properties
   - Border radius variables
   - Component-specific spacing presets
   - Utility classes for common spacing patterns
   - Responsive spacing considerations
   
   Usage:
   - Use variables: var(--space-4) instead of hardcoded 16px
   - Use utility classes: .p-4, .m-2, .gap-3
   - Use component presets: var(--padding-button), var(--margin-card)
*/

:root {
  /* ===================================================
     BASE SPACING SCALE
     ===================================================
     
     Following a consistent 4px base unit system
     Values progress in a logical scale for design consistency
  */
  
  /* Core spacing scale */
  --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 */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  

  
  /* ===================================================
     BORDER RADIUS SCALE - MOVED TO COLOUR_SCHEME.CSS
     ===================================================
     Border radius variables are now centralized in colour_scheme.css
     for consistency with other design tokens.
  */
  
  /* ===================================================
     COMPONENT-SPECIFIC SPACING PRESETS
     ===================================================
     
     Pre-defined spacing combinations for common components
     This ensures consistency and reduces repetition
  */
  
  /* Button spacing */
  --padding-button-sm: var(--space-1) var(--space-3);      /* 4px 12px */
  --padding-button: var(--space-2) var(--space-4);         /* 8px 16px */
  --padding-button-lg: var(--space-3) var(--space-6);      /* 12px 24px */
  
  /* Form element spacing */
  --padding-input: var(--space-3) var(--space-3);          /* 12px 12px */
  --padding-select: var(--space-3) var(--space-8) var(--space-3) var(--space-3); /* Account for dropdown arrow */
  --margin-form-group: var(--space-4);                     /* 16px */
  
  /* Card and container spacing */
  --padding-card-sm: var(--space-3);                       /* 12px */
  --padding-card: var(--space-4);                          /* 16px */
  --padding-card-lg: var(--space-6);                       /* 24px */
  --margin-card: var(--space-4);                           /* 16px */
  
  /* List and menu spacing */
  --padding-list-item: var(--space-2) var(--space-4);      /* 8px 16px */
  --margin-list-item: var(--space-1);                      /* 4px */
  --gap-list: var(--space-2);                              /* 8px */
  
  /* Layout section spacing */
  --padding-section-sm: var(--space-4);                    /* 16px */
  --padding-section: var(--space-6);                       /* 24px */
  --padding-section-lg: var(--space-8);                    /* 32px */
  --margin-section: var(--space-8);                        /* 32px */
  
  /* Sidebar and navigation spacing */
  --padding-sidebar-item: var(--space-2) var(--space-4);   /* 8px 16px */
  --margin-sidebar-item: var(--space-2);                   /* 8px */
  --padding-nav-item: var(--space-2) var(--space-3);       /* 8px 12px */
  
  /* Table spacing */
  --padding-table-cell: var(--space-2) var(--space-3);     /* 8px 12px */
  --margin-table: var(--space-4);                          /* 16px */
  
  /* Modal and dialog spacing */
  --padding-modal: var(--space-6);                         /* 24px */
  --margin-modal: var(--space-4);                          /* 16px */
  
  /* ===================================================
     RESPONSIVE SPACING MULTIPLIERS
     ===================================================
     
     For responsive design adjustments
  */
  
  --space-multiplier-mobile: 0.75;   /* 25% smaller on mobile */
  --space-multiplier-tablet: 0.875;  /* 12.5% smaller on tablet */
  --space-multiplier-desktop: 1;     /* Base size on desktop */
}

/* ===================================================
   UTILITY CLASSES - MARGIN
   ===================================================
   
   Consistent margin utilities following Tailwind-like naming
   Format: .m{sides}-{size}
   Sides: t(op), r(ight), b(ottom), l(eft), x(horizontal), y(vertical), (all)
*/

/* Horizontal margin (left + right) */
.mx-auto { margin-left: auto; margin-right: auto; }

/* Vertical margin (top + bottom) */
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }

/* Individual side margins */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.mr-2 { margin-right: var(--space-2); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

/* ===================================================
   UTILITY CLASSES - PADDING
   ===================================================
*/

/* All sides padding */
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

/* Vertical padding (top + bottom) */
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* ===================================================
   UTILITY CLASSES - GAP (for flexbox/grid)
   ===================================================
*/

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }

/* ===================================================
   RESPONSIVE SPACING
   ===================================================
   
   Smaller spacing on mobile devices for better space utilization
*/

@media (max-width: 768px) {
  :root {
    /* Reduce spacing scale by 25% on mobile */
    --space-1: calc(0.25rem * var(--space-multiplier-mobile));
    --space-2: calc(0.5rem * var(--space-multiplier-mobile));
    --space-3: calc(0.75rem * var(--space-multiplier-mobile));
    --space-4: calc(1rem * var(--space-multiplier-mobile));
    --space-5: calc(1.25rem * var(--space-multiplier-mobile));
    --space-6: calc(1.5rem * var(--space-multiplier-mobile));
    --space-8: calc(2rem * var(--space-multiplier-mobile));
    --space-10: calc(2.5rem * var(--space-multiplier-mobile));
    --space-12: calc(3rem * var(--space-multiplier-mobile));
    --space-16: calc(4rem * var(--space-multiplier-mobile));
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    /* Slightly reduce spacing on tablet */
    --space-1: calc(0.25rem * var(--space-multiplier-tablet));
    --space-2: calc(0.5rem * var(--space-multiplier-tablet));
    --space-3: calc(0.75rem * var(--space-multiplier-tablet));
    --space-4: calc(1rem * var(--space-multiplier-tablet));
    --space-5: calc(1.25rem * var(--space-multiplier-tablet));
    --space-6: calc(1.5rem * var(--space-multiplier-tablet));
    --space-8: calc(2rem * var(--space-multiplier-tablet));
    --space-10: calc(2.5rem * var(--space-multiplier-tablet));
    --space-12: calc(3rem * var(--space-multiplier-tablet));
    --space-16: calc(4rem * var(--space-multiplier-tablet));
  }
}

/* ===================================================
   UTILITY CLASSES - DISPLAY
   ===================================================
   
   Common display utilities for layout control
*/

.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }

/* ===================================================
   FLEX UTILITIES
   ===================================================

   Common flex layout patterns for consistent alignment
*/

/* Flex alignment */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Flex direction */
.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Flex grow/shrink */
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Align items variants */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* Justify content variants */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }