// ========================================================================== // SEMANTIC SHADOWS // ========================================================================== // Meaningful shadow tokens for elevation and depth hierarchy // Maps base shadow values to contextual usage patterns // ========================================================================== @use '../../base/shadows' as *; @use '../colors' as *; // Add this line // ELEVATION HIERARCHY - Material Design inspired depth levels $semantic-shadow-elevation-0: $base-shadow-none !default; // No elevation - flat elements $semantic-shadow-elevation-1: $base-shadow-xs !default; // Subtle lift - cards at rest $semantic-shadow-elevation-2: $base-shadow-sm !default; // Light hover - interactive cards $semantic-shadow-elevation-3: $base-shadow-md !default; // Medium lift - dropdowns, popovers $semantic-shadow-elevation-4: $base-shadow-lg !default; // High lift - modals, dialogs $semantic-shadow-elevation-5: $base-shadow-xl !default; // Maximum lift - tooltips, notifications // COMPONENT SHADOWS - Specific component contexts $semantic-shadow-card-rest: $base-shadow-xs !default; // Cards in default state $semantic-shadow-card-hover: $base-shadow-sm !default; // Cards on hover $semantic-shadow-card-active: $base-shadow-md !default; // Cards when pressed/active $semantic-shadow-card-featured: $base-shadow-lg !default; // Featured/highlighted cards // INTERACTIVE SHADOWS - User interaction feedback $semantic-shadow-button-rest: $base-shadow-none !default; // Buttons in default state $semantic-shadow-button-hover: $base-shadow-xs !default; // Buttons on hover $semantic-shadow-button-active: $base-shadow-sm !default; // Buttons when pressed $semantic-shadow-button-focus: 0 0 0 3px rgba($semantic-color-brand-primary, 0.12) !default; // Button focus ring //$semantic-shadow-button-focus: 0 0 0 3px rgba($base-color-primary, 0.12) !default; // Button focus ring // OVERLAY SHADOWS - Floating elements $semantic-shadow-dropdown: $base-shadow-md !default; // Dropdown menus $semantic-shadow-popover: $base-shadow-lg !default; // Popovers and tooltips $semantic-shadow-modal: $base-shadow-2xl !default; // Modal dialogs $semantic-shadow-drawer: $base-shadow-xl !default; // Side drawers/panels // FORM SHADOWS - Input and form elements $semantic-shadow-input-rest: $base-shadow-none !default; // Inputs in default state $semantic-shadow-input-focus: 0 0 0 2px rgba($semantic-color-brand-primary, 0.12) !default; // Input focus ring $semantic-shadow-input-error: 0 0 0 2px rgba($semantic-color-brand-primary, 0.12) !default; // Input error state $semantic-shadow-input-inner: $base-shadow-inner !default; // Inset input shadow // NAVIGATION SHADOWS - Menu and navigation elements $semantic-shadow-nav-primary: $base-shadow-sm !default; // Primary navigation bar $semantic-shadow-nav-secondary: $base-shadow-xs !default; // Secondary navigation elements $semantic-shadow-nav-submenu: $base-shadow-md !default; // Submenu dropdowns // SURFACE SHADOWS - Background and container elements $semantic-shadow-surface-raised: $base-shadow-xs !default; // Slightly raised surfaces $semantic-shadow-surface-floating: $base-shadow-sm !default; // Floating surfaces $semantic-shadow-surface-overlay: $base-shadow-lg !default; // Overlay surfaces // UTILITY SHADOWS - Special purpose shadows $semantic-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.1) !default; // Text shadow for legibility $semantic-shadow-image: $base-shadow-sm !default; // Image/media shadows $semantic-shadow-separator: $base-shadow-inner !default; // Divider/separator shadows // AI-SPECIFIC SHADOWS - Special AI/tech themed shadows $semantic-shadow-ai-element: $base-shadow-ai-glow !default; // AI/tech themed glow $semantic-shadow-ai-active: $base-shadow-ai-pulse !default; // Active AI elements $semantic-shadow-ai-subtle: $base-shadow-ai-soft !default; // Subtle AI theming // CONTEXT-AWARE SHADOWS - Theme and context sensitive $semantic-shadow-success: 0 0 0 2px rgba($semantic-color-success, 0.12) !default; // Success state $semantic-shadow-warning: 0 0 0 2px rgba($semantic-color-warning, 0.12) !default; // Warning state $semantic-shadow-danger: 0 0 0 2px rgba($semantic-color-danger, 0.12) !default; // Danger state $semantic-shadow-info: 0 0 0 2px rgba($semantic-color-info, 0.12) !default; // Info state // ========================================================================== // BACKWARDS COMPATIBILITY ALIASES // ========================================================================== // Aliases for existing shadow patterns in the codebase $semantic-shadow-elevated: $base-shadow-md !default; // General elevated elements $semantic-shadow-floating: $base-shadow-lg !default; // Floating elements // INDIVIDUAL SEMANTIC SHADOW TOKENS - Direct access to all base shadow values // STANDARD SHADOWS $semantic-shadow-xs: $base-shadow-xs !default; $semantic-shadow-sm: $base-shadow-sm !default; $semantic-shadow-md: $base-shadow-md !default; $semantic-shadow-lg: $base-shadow-lg !default; $semantic-shadow-xl: $base-shadow-xl !default; $semantic-shadow-2xl: $base-shadow-2xl !default; $semantic-shadow-inner: $base-shadow-inner !default; $semantic-shadow-none: $base-shadow-none !default; // AI SHADOWS $semantic-shadow-ai-glow: $base-shadow-ai-glow !default; $semantic-shadow-ai-pulse: $base-shadow-ai-pulse !default; $semantic-shadow-ai-soft: $base-shadow-ai-soft !default;