// ==========================================================================
// SEMANTIC SPACING
// ==========================================================================
// Meaningful spacing tokens for layout and component design
// Maps base spacing values to contextual usage patterns
// ==========================================================================
@use '../../base/spacing' as *;

// COMPONENT SPACING - Internal component spacing
$semantic-spacing-component-xs: $base-spacing-1 !default;              // 0.25rem - tight spacing
$semantic-spacing-component-sm: $base-spacing-2 !default;              // 0.5rem - small spacing
$semantic-spacing-component-md: $base-spacing-3 !default;              // 0.75rem - medium spacing
$semantic-spacing-component-lg: $base-spacing-4 !default;              // 1rem - large spacing
$semantic-spacing-component-xl: $base-spacing-6 !default;              // 1.5rem - extra large spacing

$semantic-spacing-component-padding-xs: $base-spacing-1 !default;      // 0.25rem - tight padding
$semantic-spacing-component-padding-sm: $base-spacing-2 !default;      // 0.5rem - small padding
$semantic-spacing-component-padding-md: $base-spacing-3 !default;      // 0.75rem - medium padding
$semantic-spacing-component-padding-lg: $base-spacing-4 !default;      // 1rem - large padding
$semantic-spacing-component-padding-xl: $base-spacing-6 !default;      // 1.5rem - extra large padding

// LAYOUT SPACING - Between major layout elements
$semantic-spacing-layout-section-xs: $base-spacing-8 !default;         // 2rem - small section gap
$semantic-spacing-layout-section-sm: $base-spacing-12 !default;        // 3rem - medium section gap
$semantic-spacing-layout-section-md: $base-spacing-16 !default;        // 4rem - large section gap
$semantic-spacing-layout-section-lg: $base-spacing-20 !default;        // 5rem - extra large section gap
$semantic-spacing-layout-section-xl: $base-spacing-24 !default;        // 6rem - huge section gap

// CONTENT SPACING - Text and content flow
$semantic-spacing-content-paragraph: $base-spacing-4 !default;         // 1rem - paragraph spacing
$semantic-spacing-content-heading: $base-spacing-6 !default;           // 1.5rem - heading spacing
$semantic-spacing-content-list-item: $base-spacing-2 !default;         // 0.5rem - list item spacing
$semantic-spacing-content-line-tight: $base-spacing-1 !default;        // 0.25rem - tight line spacing
$semantic-spacing-content-line-normal: $base-spacing-2 !default;       // 0.5rem - normal line spacing

// INTERACTIVE SPACING - Clickable elements
$semantic-spacing-interactive-button-padding-x: $base-spacing-4 !default;  // 1rem - button horizontal padding
$semantic-spacing-interactive-button-padding-y: $base-spacing-2 !default;  // 0.5rem - button vertical padding
$semantic-spacing-interactive-input-padding-x: $base-spacing-3 !default;   // 0.75rem - input horizontal padding
$semantic-spacing-interactive-input-padding-y: $base-spacing-2-5 !default; // 0.625rem - input vertical padding
$semantic-spacing-interactive-touch-target: $base-spacing-11 !default;     // 2.75rem - minimum touch target

// CARD AND CONTAINER SPACING
$semantic-spacing-container-card-padding: $base-spacing-4 !default;        // 1rem - card internal padding
$semantic-spacing-container-card-padding-lg: $base-spacing-6 !default;     // 1.5rem - large card padding
$semantic-spacing-container-modal-padding: $base-spacing-6 !default;       // 1.5rem - modal padding
$semantic-spacing-container-sidebar-padding: $base-spacing-4 !default;     // 1rem - sidebar padding

// NAVIGATION SPACING
$semantic-spacing-nav-item-padding-x: $base-spacing-3 !default;            // 0.75rem - nav item horizontal padding
$semantic-spacing-nav-item-padding-y: $base-spacing-2 !default;            // 0.5rem - nav item vertical padding
$semantic-spacing-nav-section-gap: $base-spacing-6 !default;               // 1.5rem - nav section gaps
$semantic-spacing-nav-submenu-indent: $base-spacing-4 !default;            // 1rem - submenu indentation

// GRID AND LAYOUT GAPS
$semantic-spacing-grid-gap-xs: $base-spacing-2 !default;                   // 0.5rem - tight grid
$semantic-spacing-grid-gap-sm: $base-spacing-3 !default;                   // 0.75rem - small grid
$semantic-spacing-grid-gap-md: $base-spacing-4 !default;                   // 1rem - medium grid
$semantic-spacing-grid-gap-lg: $base-spacing-6 !default;                   // 1.5rem - large grid
$semantic-spacing-grid-gap-xl: $base-spacing-8 !default;                   // 2rem - extra large grid

// FORM SPACING
$semantic-spacing-form-field-gap: $base-spacing-4 !default;                // 1rem - gap between form fields
$semantic-spacing-form-group-gap: $base-spacing-6 !default;                // 1.5rem - gap between form groups
$semantic-spacing-form-section-gap: $base-spacing-8 !default;              // 2rem - gap between form sections
$semantic-spacing-form-label-gap: $base-spacing-1 !default;                // 0.25rem - label to input gap

// UTILITY SPACING - Common spacing needs
$semantic-spacing-stack-xs: $base-spacing-1 !default;                      // 0.25rem - tight stack
$semantic-spacing-stack-sm: $base-spacing-2 !default;                      // 0.5rem - small stack
$semantic-spacing-stack-md: $base-spacing-4 !default;                      // 1rem - medium stack
$semantic-spacing-stack-lg: $base-spacing-6 !default;                      // 1.5rem - large stack
$semantic-spacing-stack-xl: $base-spacing-8 !default;                      // 2rem - extra large stack

// MICRO SPACING - Fine-tuned spacing
$semantic-spacing-micro-hairline: $base-spacing-micro-hairline !default;   // 0.5px - hairline
$semantic-spacing-micro-tight: $base-spacing-0-5 !default;                 // 0.125rem - very tight
$semantic-spacing-micro-icon-gap: $base-spacing-1-5 !default;              // 0.375rem - icon to text gap

// ==========================================================================
// BACKWARDS COMPATIBILITY ALIASES
// ==========================================================================
// Aliases for existing usage patterns in the codebase

// Component spacing aliases
$semantic-spacing-component-2xs: $base-spacing-1 !default;                 // 0.25rem
$semantic-spacing-component-xs: $base-spacing-2 !default;                  // 0.5rem  
$semantic-spacing-component-sm: $base-spacing-3 !default;                  // 0.75rem
$semantic-spacing-component-md: $base-spacing-4 !default;                  // 1rem
$semantic-spacing-component-lg: $base-spacing-6 !default;                  // 1.5rem
$semantic-spacing-component-xl: $base-spacing-8 !default;                  // 2rem

// Layout spacing aliases  
$semantic-spacing-layout-xs: $base-spacing-2 !default;                     // 0.5rem
$semantic-spacing-layout-sm: $base-spacing-4 !default;                     // 1rem
$semantic-spacing-layout-md: $base-spacing-6 !default;                     // 1.5rem
$semantic-spacing-layout-lg: $base-spacing-8 !default;                     // 2rem
$semantic-spacing-layout-xl: $base-spacing-12 !default;                    // 3rem

// Section spacing aliases
$semantic-spacing-section-xs: $base-spacing-8 !default;                    // 2rem
$semantic-spacing-section-sm: $base-spacing-12 !default;                   // 3rem
$semantic-spacing-section-md: $base-spacing-16 !default;                   // 4rem
$semantic-spacing-section-lg: $base-spacing-20 !default;                   // 5rem
$semantic-spacing-section-xl: $base-spacing-24 !default;                   // 6rem

// INDIVIDUAL SEMANTIC SPACING VARIABLES - Direct access to all base spacing values
$semantic-spacing-0: $base-spacing-0 !default;
$semantic-spacing-0-5: $base-spacing-0-5 !default;
$semantic-spacing-1: $base-spacing-1 !default;
$semantic-spacing-1-5: $base-spacing-1-5 !default;
$semantic-spacing-2: $base-spacing-2 !default;
$semantic-spacing-2-5: $base-spacing-2-5 !default;
$semantic-spacing-3: $base-spacing-3 !default;
$semantic-spacing-3-5: $base-spacing-3-5 !default;
$semantic-spacing-4: $base-spacing-4 !default;
$semantic-spacing-4-5: $base-spacing-4-5 !default;
$semantic-spacing-5: $base-spacing-5 !default;
$semantic-spacing-6: $base-spacing-6 !default;
$semantic-spacing-7: $base-spacing-7 !default;
$semantic-spacing-8: $base-spacing-8 !default;
$semantic-spacing-9: $base-spacing-9 !default; 
$semantic-spacing-10: $base-spacing-10 !default;
$semantic-spacing-11: $base-spacing-11 !default;
$semantic-spacing-12: $base-spacing-12 !default;
$semantic-spacing-14: $base-spacing-14 !default;
$semantic-spacing-16: $base-spacing-16 !default;
$semantic-spacing-20: $base-spacing-20 !default;
$semantic-spacing-24: $base-spacing-24 !default;
$semantic-spacing-28: $base-spacing-28 !default;
$semantic-spacing-32: $base-spacing-32 !default;
$semantic-spacing-36: $base-spacing-36 !default;
$semantic-spacing-40: $base-spacing-40 !default;
$semantic-spacing-44: $base-spacing-44 !default;
$semantic-spacing-48: $base-spacing-48 !default;
$semantic-spacing-52: $base-spacing-52 !default;
$semantic-spacing-56: $base-spacing-56 !default;
$semantic-spacing-60: $base-spacing-60 !default;
$semantic-spacing-64: $base-spacing-64 !default;
$semantic-spacing-72: $base-spacing-72 !default;
$semantic-spacing-80: $base-spacing-80 !default;
$semantic-spacing-96: $base-spacing-96 !default;
$semantic-spacing-128: $base-spacing-128 !default;
$semantic-spacing-160: $base-spacing-160 !default;
$semantic-spacing-192: $base-spacing-192 !default;
$semantic-spacing-224: $base-spacing-224 !default;
$semantic-spacing-256: $base-spacing-256 !default;

// SEMANTIC SIZE ALIASES - Common semantic size names
$semantic-spacing-xs: $base-spacing-semantic-xs !default;              // 0.5rem
$semantic-spacing-sm: $base-spacing-semantic-sm !default;              // 0.75rem
$semantic-spacing-md: $base-spacing-semantic-md !default;              // 1rem
$semantic-spacing-lg: $base-spacing-semantic-lg !default;              // 1.5rem
$semantic-spacing-xl: $base-spacing-semantic-xl !default;              // 2rem
$semantic-spacing-2xl: $base-spacing-semantic-2xl !default;            // 2.5rem
$semantic-spacing-3xl: $base-spacing-semantic-3xl !default;            // 3rem
$semantic-spacing-4xl: $base-spacing-semantic-4xl !default;            // 4rem
$semantic-spacing-5xl: $base-spacing-semantic-5xl !default;            // 5rem