// ==========================================================================
// SEMANTIC SIZING
// ==========================================================================
// Meaningful sizing tokens for components and layout elements
// Maps base sizing values to contextual usage patterns
// ==========================================================================
@use '../../base/sizing' as *;

// COMPONENT SIZING - UI element dimensions
$semantic-sizing-button-height-sm: $base-sizing-button-sm !default;        // 32px - Small button height
$semantic-sizing-button-height-md: $base-sizing-button-md !default;        // 40px - Medium button height  
$semantic-sizing-button-height-lg: $base-sizing-button-lg !default;        // 48px - Large button height

$semantic-sizing-input-height-sm: $base-sizing-input-sm !default;          // 32px - Small input height
$semantic-sizing-input-height-md: $base-sizing-input-md !default;          // 40px - Medium input height
$semantic-sizing-input-height-lg: $base-sizing-input-lg !default;          // 48px - Large input height

// ICON SIZING - Icon dimensions for different contexts
$semantic-sizing-icon-inline: $base-sizing-icon-sm !default;               // 16px - Inline with text
$semantic-sizing-icon-button: $base-sizing-icon-md !default;               // 20px - In buttons
$semantic-sizing-icon-navigation: $base-sizing-icon-lg !default;           // 24px - Navigation items
$semantic-sizing-icon-header: $base-sizing-icon-xl !default;               // 32px - Page headers
$semantic-sizing-icon-hero: $base-sizing-icon-3xl !default;                // 48px - Hero sections
$semantic-sizing-icon-feature: $base-sizing-icon-4xl !default;             // 64px - Feature highlights

// AVATAR SIZING - User avatar dimensions
$semantic-sizing-avatar-inline: $base-sizing-avatar-xs !default;           // 24px - Inline avatars
$semantic-sizing-avatar-comment: $base-sizing-avatar-sm !default;          // 32px - Comment avatars
$semantic-sizing-avatar-card: $base-sizing-avatar-md !default;             // 40px - Card avatars
$semantic-sizing-avatar-nav: $base-sizing-avatar-lg !default;              // 48px - Navigation avatars
$semantic-sizing-avatar-profile: $base-sizing-avatar-xl !default;          // 64px - Profile avatars
$semantic-sizing-avatar-hero: $base-sizing-avatar-2xl !default;            // 80px - Hero profile avatars

// INTERACTION SIZING - Touch and click targets
$semantic-sizing-touch-minimum: $base-sizing-touch-minimum !default;       // 44px - Minimum touch target
$semantic-sizing-touch-comfortable: $base-sizing-touch-comfortable !default; // 48px - Comfortable touch
$semantic-sizing-touch-spacious: $base-sizing-touch-spacious !default;     // 56px - Spacious touch

$semantic-sizing-clickable-minimum: $base-sizing-interaction-min-clickable !default;  // 32px - Minimum clickable

// LAYOUT SIZING - Container and layout dimensions
$semantic-sizing-sidebar-collapsed: $base-sizing-width-16 !default;        // 4rem - Collapsed sidebar
$semantic-sizing-sidebar-expanded: $base-sizing-width-64 !default;         // 16rem - Expanded sidebar
$semantic-sizing-sidebar-wide: $base-sizing-width-80 !default;             // 20rem - Wide sidebar

$semantic-sizing-navbar-height: $base-sizing-height-16 !default;           // 4rem - Navigation bar height
$semantic-sizing-header-height: $base-sizing-height-20 !default;           // 5rem - Page header height
$semantic-sizing-footer-height: $base-sizing-height-24 !default;           // 6rem - Footer height

// CONTENT SIZING - Text and content areas
$semantic-sizing-content-narrow: $base-sizing-max-width-2xl !default;      // 42rem - Narrow content
$semantic-sizing-content-medium: $base-sizing-max-width-4xl !default;      // 56rem - Medium content
$semantic-sizing-content-wide: $base-sizing-max-width-6xl !default;        // 72rem - Wide content
$semantic-sizing-content-full: $base-sizing-max-width-full !default;       // 100% - Full width content

$semantic-sizing-prose-width: $base-sizing-max-width-prose !default;       // 65ch - Optimal reading width

// CARD SIZING - Card and panel dimensions
$semantic-sizing-card-width-sm: $base-sizing-width-64 !default;            // 16rem - Small cards
$semantic-sizing-card-width-md: $base-sizing-width-80 !default;            // 20rem - Medium cards
$semantic-sizing-card-width-lg: $base-sizing-width-96 !default;            // 24rem - Large cards

$semantic-sizing-card-height-sm: $base-sizing-height-32 !default;          // 8rem - Small card height
$semantic-sizing-card-height-md: $base-sizing-height-48 !default;          // 12rem - Medium card height
$semantic-sizing-card-height-lg: $base-sizing-height-64 !default;          // 16rem - Large card height

// MODAL SIZING - Dialog and modal dimensions
$semantic-sizing-modal-width-sm: $base-sizing-max-width-md !default;       // 28rem - Small modals
$semantic-sizing-modal-width-md: $base-sizing-max-width-lg !default;       // 32rem - Medium modals
$semantic-sizing-modal-width-lg: $base-sizing-max-width-2xl !default;      // 42rem - Large modals
$semantic-sizing-modal-width-xl: $base-sizing-max-width-4xl !default;      // 56rem - Extra large modals

$semantic-sizing-modal-height-max: 80vh !default;                          // Maximum modal height

// BREAKPOINT SIZING - Responsive design breakpoints
$semantic-sizing-breakpoint-mobile: $base-sizing-max-width-screen-sm !default;     // 640px
$semantic-sizing-breakpoint-tablet: $base-sizing-max-width-screen-md !default;     // 768px
$semantic-sizing-breakpoint-desktop: $base-sizing-max-width-screen-lg !default;    // 1024px
$semantic-sizing-breakpoint-wide: $base-sizing-max-width-screen-xl !default;       // 1280px
$semantic-sizing-breakpoint-ultra: $base-sizing-max-width-screen-2xl !default;     // 1536px

// FORM SIZING - Form element dimensions
$semantic-sizing-form-field-width-sm: $base-sizing-width-32 !default;      // 8rem - Small form fields
$semantic-sizing-form-field-width-md: $base-sizing-width-48 !default;      // 12rem - Medium form fields
$semantic-sizing-form-field-width-lg: $base-sizing-width-64 !default;      // 16rem - Large form fields
$semantic-sizing-form-field-width-full: $base-sizing-width-full !default;  // 100% - Full width fields

// DIVIDER SIZING - Line and separator dimensions
$semantic-sizing-divider-thin: $base-sizing-line-1 !default;               // 1px - Thin dividers
$semantic-sizing-divider-medium: $base-sizing-line-2 !default;             // 2px - Medium dividers
$semantic-sizing-divider-thick: $base-sizing-line-4 !default;              // 4px - Thick dividers
$semantic-sizing-divider-heavy: $base-sizing-line-8 !default;              // 8px - Heavy dividers

// UTILITY SIZING - Common sizing patterns
$semantic-sizing-full-viewport-width: 100vw !default;                      // Full viewport width
$semantic-sizing-full-viewport-height: 100vh !default;                     // Full viewport height
$semantic-sizing-half-viewport-height: 50vh !default;                      // Half viewport height

$semantic-sizing-container-padding: $base-sizing-width-4 !default;         // 1rem - Container padding
$semantic-sizing-container-padding-lg: $base-sizing-width-6 !default;      // 1.5rem - Large container padding

// APPBAR SIZING - Application bar height variants
$semantic-sizing-appbar-compact: $base-sizing-height-12 !default;          // 3rem/48px - Compact appbar
$semantic-sizing-appbar-standard: $base-sizing-height-16 !default;         // 4rem/64px - Standard appbar  
$semantic-sizing-appbar-large: $base-sizing-height-20 !default;            // 5rem/80px - Large appbar
$semantic-sizing-appbar-prominent: $base-sizing-height-24 !default;        // 6rem/96px - Prominent appbar

$semantic-sizing-touch-target: $base-sizing-touch-comfortable !default;    // 48px - Touch target size

// LAYER/Z-INDEX TOKENS - Stacking order hierarchy
$semantic-layer-base: 0 !default;                                          // Base layer for content
$semantic-layer-dropdown: 1000 !default;                                   // Dropdowns and menus
$semantic-layer-overlay: 2000 !default;                                    // Overlays and backdrops
$semantic-layer-modal: 3000 !default;                                      // Modal dialogs
$semantic-layer-tooltip: 4000 !default;                                    // Tooltips and hints
$semantic-layer-appbar: 100 !default;                                      // App bars and navigation
$semantic-layer-sidebar: 50 !default;                                      // Side navigation
$semantic-layer-banner: 200 !default;                                      // Banners and alerts

// AI-SPECIFIC SIZING - Special AI/tech themed sizes  
$semantic-sizing-ai-indicator: $base-sizing-ai-indicator !default;         // 20px - AI indicators
$semantic-sizing-ai-glow: $base-sizing-ai-glow !default;                   // 40px - AI glow effects