@rhavenside/baseline-ui 1.0.0

package/src/layout/_grid.scss

@@ -0,0 +1,123 @@
+// ============================================================================
+// Flexbox 12-Column Grid System
+// ============================================================================
+
+@use 'sass:math';
+@use '../tokens/tokens' as *;
+
+// Row
+.bl-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--spacing-md) * -1);
+  margin-right: calc(var(--spacing-md) * -1);
+}
+
+// Column Base
+.bl-col {
+  flex: 1 0 0%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+// Column Sizes (1-12)
+@for $i from 1 through 12 {
+  .bl-col-#{$i} {
+    flex: 0 0 auto;
+    width: math.percentage(math.div($i, 12));
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
+
+// Responsive Breakpoints
+// Small (sm: 640px)
+@media (min-width: 640px) {
+  .bl-col-sm {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+
+  @for $i from 1 through 12 {
+    .bl-col-sm-#{$i} {
+      flex: 0 0 auto;
+      width: math.percentage(math.div($i, 12));
+      padding-left: var(--spacing-md);
+      padding-right: var(--spacing-md);
+    }
+  }
+}
+
+// Medium (md: 768px)
+@media (min-width: 768px) {
+  .bl-col-md {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+
+  @for $i from 1 through 12 {
+    .bl-col-md-#{$i} {
+      flex: 0 0 auto;
+      width: math.percentage(math.div($i, 12));
+      padding-left: var(--spacing-md);
+      padding-right: var(--spacing-md);
+    }
+  }
+}
+
+// Large (lg: 1024px)
+@media (min-width: 1024px) {
+  .bl-col-lg {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+
+  @for $i from 1 through 12 {
+    .bl-col-lg-#{$i} {
+      flex: 0 0 auto;
+      width: math.percentage(math.div($i, 12));
+      padding-left: var(--spacing-md);
+      padding-right: var(--spacing-md);
+    }
+  }
+}
+
+// Extra Large (xl: 1280px)
+@media (min-width: 1280px) {
+  .bl-col-xl {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+
+  @for $i from 1 through 12 {
+    .bl-col-xl-#{$i} {
+      flex: 0 0 auto;
+      width: math.percentage(math.div($i, 12));
+      padding-left: var(--spacing-md);
+      padding-right: var(--spacing-md);
+    }
+  }
+}
+
+// 2X Large (2xl: 1536px)
+@media (min-width: 1536px) {
+  .bl-col-2xl {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+
+  @for $i from 1 through 12 {
+    .bl-col-2xl-#{$i} {
+      flex: 0 0 auto;
+      width: math.percentage(math.div($i, 12));
+      padding-left: var(--spacing-md);
+      padding-right: var(--spacing-md);
+    }
+  }
+}
+

package/src/themes/_dark.scss

@@ -0,0 +1,122 @@
+// ============================================================================
+// Dark Theme
+// ============================================================================
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    // Neutral Grayscale (inverted)
+    --color-gray-50: #030712;
+    --color-gray-100: #111827;
+    --color-gray-200: #1f2937;
+    --color-gray-300: #374151;
+    --color-gray-400: #4b5563;
+    --color-gray-500: #6b7280;
+    --color-gray-600: #9ca3af;
+    --color-gray-700: #d1d5db;
+    --color-gray-800: #e5e7eb;
+    --color-gray-900: #f3f4f6;
+    --color-gray-950: #f9fafb;
+
+    // Semantic Colors (adjusted for dark mode)
+    --color-primary: #f3f4f6;
+    --color-primary-light: #e5e7eb;
+    --color-primary-dark: #d1d5db;
+
+    --color-secondary: #9ca3af;
+    --color-secondary-light: #d1d5db;
+    --color-secondary-dark: #6b7280;
+
+    --color-success: #34d399;
+    --color-success-light: #6ee7b7;
+    --color-success-dark: #10b981;
+
+    --color-warning: #fbbf24;
+    --color-warning-light: #fcd34d;
+    --color-warning-dark: #f59e0b;
+
+    --color-error: #f87171;
+    --color-error-light: #fca5a5;
+    --color-error-dark: #ef4444;
+
+    --color-info: #60a5fa;
+    --color-info-light: #93c5fd;
+    --color-info-dark: #3b82f6;
+
+    // Text Colors
+    --color-text: #f3f4f6;
+    --color-text-muted: #9ca3af;
+    --color-text-light: #6b7280;
+    --color-text-inverse: #111827;
+
+    // Background Colors
+    --color-bg: #111827;
+    --color-bg-alt: #1f2937;
+    --color-bg-overlay: rgba(0, 0, 0, 0.7);
+
+    // Border Colors
+    --color-border: #374151;
+    --color-border-light: #1f2937;
+    --color-border-dark: #4b5563;
+    --color-border-focus: #60a5fa;
+  }
+}
+
+// Manual Dark Theme Toggle (via class)
+.bl-theme-dark,
+[data-theme="dark"] {
+  // Neutral Grayscale (inverted)
+  --color-gray-50: #030712;
+  --color-gray-100: #111827;
+  --color-gray-200: #1f2937;
+  --color-gray-300: #374151;
+  --color-gray-400: #4b5563;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #9ca3af;
+  --color-gray-700: #d1d5db;
+  --color-gray-800: #e5e7eb;
+  --color-gray-900: #f3f4f6;
+  --color-gray-950: #f9fafb;
+
+  // Semantic Colors (adjusted for dark mode)
+  --color-primary: #f3f4f6;
+  --color-primary-light: #e5e7eb;
+  --color-primary-dark: #d1d5db;
+
+  --color-secondary: #9ca3af;
+  --color-secondary-light: #d1d5db;
+  --color-secondary-dark: #6b7280;
+
+  --color-success: #34d399;
+  --color-success-light: #6ee7b7;
+  --color-success-dark: #10b981;
+
+  --color-warning: #fbbf24;
+  --color-warning-light: #fcd34d;
+  --color-warning-dark: #f59e0b;
+
+  --color-error: #f87171;
+  --color-error-light: #fca5a5;
+  --color-error-dark: #ef4444;
+
+  --color-info: #60a5fa;
+  --color-info-light: #93c5fd;
+  --color-info-dark: #3b82f6;
+
+  // Text Colors
+  --color-text: #f3f4f6;
+  --color-text-muted: #9ca3af;
+  --color-text-light: #6b7280;
+  --color-text-inverse: #111827;
+
+  // Background Colors
+  --color-bg: #111827;
+  --color-bg-alt: #1f2937;
+  --color-bg-overlay: rgba(0, 0, 0, 0.7);
+
+  // Border Colors
+  --color-border: #374151;
+  --color-border-light: #1f2937;
+  --color-border-dark: #4b5563;
+  --color-border-focus: #60a5fa;
+}
+

package/src/themes/_light.scss

@@ -0,0 +1,7 @@
+// ============================================================================
+// Light Theme (Default)
+// ============================================================================
+
+// Light theme is already defined in tokens/_colors.scss
+// This file exists for consistency and potential future overrides
+

package/src/tokens/_borders.scss

@@ -0,0 +1,36 @@
+// ============================================================================
+// Border Tokens (Technical Design - Max 4px Radius)
+// ============================================================================
+
+// Border Widths
+$border-width-none: 0;
+$border-width-thin: 1px;
+$border-width-base: 2px;
+$border-width-thick: 4px;
+
+// Border Radius (Technical - Max 4px)
+$border-radius-none: 0;
+$border-radius-sm: 2px;
+$border-radius-md: 4px;
+$border-radius-lg: 4px; // Max 4px
+$border-radius-xl: 4px; // Max 4px
+$border-radius-2xl: 4px; // Max 4px
+$border-radius-full: 9999px; // Keep for special cases like switches
+
+// Export as CSS Custom Properties
+:root {
+  // Border Widths
+  --border-width-none: #{$border-width-none};
+  --border-width-thin: #{$border-width-thin};
+  --border-width-base: #{$border-width-base};
+  --border-width-thick: #{$border-width-thick};
+
+  // Border Radius (Technical)
+  --border-radius-none: #{$border-radius-none};
+  --border-radius-sm: #{$border-radius-sm};
+  --border-radius-md: #{$border-radius-md};
+  --border-radius-lg: #{$border-radius-lg};
+  --border-radius-xl: #{$border-radius-xl};
+  --border-radius-2xl: #{$border-radius-2xl};
+  --border-radius-full: #{$border-radius-full};
+}

package/src/tokens/_colors.scss

@@ -0,0 +1,136 @@
+// ============================================================================
+// Color Tokens (Technical Glass Design)
+// ============================================================================
+
+// Base Tone: Dark Graphite
+$color-base: #1A1A1A;
+$color-base-light: #2A2A2A;
+$color-base-dark: #0F0F0F;
+
+// Accent: Ice Blue
+$color-accent: #4A9EFF;
+$color-accent-light: #6BB0FF;
+$color-accent-dark: #3A8EEF;
+
+// Neutral Grayscale (for glass effects)
+$color-gray-50: #f9fafb;
+$color-gray-100: #f3f4f6;
+$color-gray-200: #e5e7eb;
+$color-gray-300: #d1d5db;
+$color-gray-400: #9ca3af;
+$color-gray-500: #6b7280;
+$color-gray-600: #4b5563;
+$color-gray-700: #374151;
+$color-gray-800: #1f2937;
+$color-gray-900: #111827;
+$color-gray-950: #030712;
+
+// Semantic Colors (using accent for primary)
+$color-primary: $color-accent;
+$color-primary-light: $color-accent-light;
+$color-primary-dark: $color-accent-dark;
+
+$color-secondary: $color-gray-600;
+$color-secondary-light: $color-gray-500;
+$color-secondary-dark: $color-gray-700;
+
+$color-success: #10b981;
+$color-success-light: #34d399;
+$color-success-dark: #059669;
+
+$color-warning: #f59e0b;
+$color-warning-light: #fbbf24;
+$color-warning-dark: #d97706;
+
+$color-error: #ef4444;
+$color-error-light: #f87171;
+$color-error-dark: #dc2626;
+
+$color-info: $color-accent;
+$color-info-light: $color-accent-light;
+$color-info-dark: $color-accent-dark;
+
+// Text Colors (high contrast on dark ground)
+$color-text: #ffffff;
+$color-text-muted: rgba(255, 255, 255, 0.7);
+$color-text-light: rgba(255, 255, 255, 0.5);
+$color-text-inverse: #1A1A1A;
+
+// Background Colors
+$color-bg: $color-base;
+$color-bg-alt: $color-base-light;
+$color-bg-overlay: rgba(0, 0, 0, 0.3); // Desaturated, not darkened
+
+// Border Colors (cool, slightly bright on dark ground)
+$color-border: rgba(255, 255, 255, 0.15);
+$color-border-light: rgba(255, 255, 255, 0.1);
+$color-border-dark: rgba(255, 255, 255, 0.2);
+$color-border-focus: $color-accent;
+
+// Export as CSS Custom Properties
+:root {
+  // Base Tone
+  --color-base: #{$color-base};
+  --color-base-light: #{$color-base-light};
+  --color-base-dark: #{$color-base-dark};
+
+  // Accent
+  --color-accent: #{$color-accent};
+  --color-accent-light: #{$color-accent-light};
+  --color-accent-dark: #{$color-accent-dark};
+
+  // Neutral Grayscale
+  --color-gray-50: #{$color-gray-50};
+  --color-gray-100: #{$color-gray-100};
+  --color-gray-200: #{$color-gray-200};
+  --color-gray-300: #{$color-gray-300};
+  --color-gray-400: #{$color-gray-400};
+  --color-gray-500: #{$color-gray-500};
+  --color-gray-600: #{$color-gray-600};
+  --color-gray-700: #{$color-gray-700};
+  --color-gray-800: #{$color-gray-800};
+  --color-gray-900: #{$color-gray-900};
+  --color-gray-950: #{$color-gray-950};
+
+  // Semantic Colors
+  --color-primary: #{$color-primary};
+  --color-primary-light: #{$color-primary-light};
+  --color-primary-dark: #{$color-primary-dark};
+
+  --color-secondary: #{$color-secondary};
+  --color-secondary-light: #{$color-secondary-light};
+  --color-secondary-dark: #{$color-secondary-dark};
+
+  --color-success: #{$color-success};
+  --color-success-light: #{$color-success-light};
+  --color-success-dark: #{$color-success-dark};
+
+  --color-warning: #{$color-warning};
+  --color-warning-light: #{$color-warning-light};
+  --color-warning-dark: #{$color-warning-dark};
+
+  --color-error: #{$color-error};
+  --color-error-light: #{$color-error-light};
+  --color-error-dark: #{$color-error-dark};
+
+  --color-info: #{$color-info};
+  --color-info-light: #{$color-info-light};
+  --color-info-dark: #{$color-info-dark};
+
+  // Text Colors
+  --color-text: #{$color-text};
+  --color-text-muted: #{$color-text-muted};
+  --color-text-light: #{$color-text-light};
+  --color-text-inverse: #{$color-text-inverse};
+
+  // Background Colors
+  --color-bg: #{$color-bg};
+  --color-bg-alt: #{$color-bg-alt};
+  --color-bg-overlay: #{$color-bg-overlay};
+
+  // Border Colors
+  --color-border: #{$color-border};
+  --color-border-light: #{$color-border-light};
+  --color-border-dark: #{$color-border-dark};
+  --color-border-focus: #{$color-border-focus};
+}

package/src/tokens/_forms.scss

@@ -0,0 +1,170 @@
+// ============================================================================
+// Form Tokens
+// ============================================================================
+
+@use 'spacing' as *;
+@use 'colors' as *;
+@use 'typography' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+
+// Form Input Tokens
+$form-input-padding-x: $spacing-md;
+$form-input-padding-y: $spacing-sm;
+$form-input-padding-x-sm: $spacing-sm;
+$form-input-padding-y-sm: $spacing-xs;
+$form-input-padding-x-lg: $spacing-lg;
+$form-input-padding-y-lg: $spacing-md;
+
+$form-input-border-width: $border-width-thin;
+$form-input-border-radius: $border-radius-md;
+$form-input-font-size: $font-size-base;
+$form-input-font-size-sm: $font-size-sm;
+$form-input-font-size-lg: $font-size-lg;
+$form-input-line-height: $line-height-base;
+
+$form-input-bg: $color-bg;
+$form-input-bg-disabled: $color-bg-alt;
+$form-input-color: $color-text;
+$form-input-border: $color-border;
+$form-input-border-focus: $color-border-focus;
+$form-input-placeholder-color: $color-text-muted;
+
+$form-input-focus-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+$form-input-focus-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
+$form-input-focus-shadow-success: 0 0 0 3px rgba(16, 185, 129, 0.1);
+
+$form-input-opacity-disabled: 0.6;
+
+// Form Label Tokens
+$form-label-font-size: $font-size-sm;
+$form-label-font-weight: $font-weight-medium;
+$form-label-color: $color-text;
+$form-label-margin-bottom: $spacing-xs;
+
+// Form Helper/Error Tokens
+$form-helper-font-size: $font-size-xs;
+$form-helper-color: $color-text-muted;
+$form-error-color: $color-error;
+$form-error-font-size: $font-size-xs;
+$form-helper-margin-top: $spacing-xs;
+
+// Form Group Tokens
+$form-group-margin-bottom: $spacing-md;
+
+// Checkbox & Radio Tokens
+$form-checkbox-size: 1.25rem;
+$form-checkbox-margin-right: $spacing-sm;
+$form-checkbox-accent-color: $color-primary;
+$form-checkbox-opacity-disabled: 0.6;
+
+// Switch Tokens
+$form-switch-width: 3rem;
+$form-switch-height: 1.5rem;
+$form-switch-slider-size: 1.25rem;
+$form-switch-slider-offset: 0.125rem;
+$form-switch-slider-translate: 1.5rem;
+$form-switch-bg: $color-gray-300;
+$form-switch-bg-active: $color-primary;
+$form-switch-slider-bg: #ffffff;
+$form-switch-focus-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+$form-switch-opacity-disabled: 0.6;
+
+// Textarea Tokens
+$form-textarea-min-height: 100px;
+$form-textarea-resize: vertical;
+
+// Range Tokens
+$form-range-height: 0.5rem;
+$form-range-thumb-size: 1.25rem;
+$form-range-bg: $color-gray-200;
+$form-range-thumb-bg: $color-primary;
+
+// File Input Tokens
+$form-file-input-padding: $spacing-sm;
+$form-file-input-font-size: $font-size-sm;
+$form-file-input-border-style: dashed;
+$form-file-input-bg: $color-bg-alt;
+$form-file-input-bg-hover: $color-bg;
+
+// Export as CSS Custom Properties
+:root {
+  // Form Input
+  --form-input-padding-x: #{$form-input-padding-x};
+  --form-input-padding-y: #{$form-input-padding-y};
+  --form-input-padding-x-sm: #{$form-input-padding-x-sm};
+  --form-input-padding-y-sm: #{$form-input-padding-y-sm};
+  --form-input-padding-x-lg: #{$form-input-padding-x-lg};
+  --form-input-padding-y-lg: #{$form-input-padding-y-lg};
+
+  --form-input-border-width: #{$form-input-border-width};
+  --form-input-border-radius: #{$form-input-border-radius};
+  --form-input-font-size: #{$form-input-font-size};
+  --form-input-font-size-sm: #{$form-input-font-size-sm};
+  --form-input-font-size-lg: #{$form-input-font-size-lg};
+  --form-input-line-height: #{$form-input-line-height};
+
+  --form-input-bg: #{$form-input-bg};
+  --form-input-bg-disabled: #{$form-input-bg-disabled};
+  --form-input-color: #{$form-input-color};
+  --form-input-border: #{$form-input-border};
+  --form-input-border-focus: #{$form-input-border-focus};
+  --form-input-placeholder-color: #{$form-input-placeholder-color};
+
+  --form-input-focus-shadow: #{$form-input-focus-shadow};
+  --form-input-focus-shadow-error: #{$form-input-focus-shadow-error};
+  --form-input-focus-shadow-success: #{$form-input-focus-shadow-success};
+
+  --form-input-opacity-disabled: #{$form-input-opacity-disabled};
+
+  // Form Label
+  --form-label-font-size: #{$form-label-font-size};
+  --form-label-font-weight: #{$form-label-font-weight};
+  --form-label-color: #{$form-label-color};
+  --form-label-margin-bottom: #{$form-label-margin-bottom};
+
+  // Form Helper/Error
+  --form-helper-font-size: #{$form-helper-font-size};
+  --form-helper-color: #{$form-helper-color};
+  --form-error-color: #{$form-error-color};
+  --form-error-font-size: #{$form-error-font-size};
+  --form-helper-margin-top: #{$form-helper-margin-top};
+
+  // Form Group
+  --form-group-margin-bottom: #{$form-group-margin-bottom};
+
+  // Checkbox & Radio
+  --form-checkbox-size: #{$form-checkbox-size};
+  --form-checkbox-margin-right: #{$form-checkbox-margin-right};
+  --form-checkbox-accent-color: #{$form-checkbox-accent-color};
+  --form-checkbox-opacity-disabled: #{$form-checkbox-opacity-disabled};
+
+  // Switch
+  --form-switch-width: #{$form-switch-width};
+  --form-switch-height: #{$form-switch-height};
+  --form-switch-slider-size: #{$form-switch-slider-size};
+  --form-switch-slider-offset: #{$form-switch-slider-offset};
+  --form-switch-slider-translate: #{$form-switch-slider-translate};
+  --form-switch-bg: #{$form-switch-bg};
+  --form-switch-bg-active: #{$form-switch-bg-active};
+  --form-switch-slider-bg: #{$form-switch-slider-bg};
+  --form-switch-focus-shadow: #{$form-switch-focus-shadow};
+  --form-switch-opacity-disabled: #{$form-switch-opacity-disabled};
+
+  // Textarea
+  --form-textarea-min-height: #{$form-textarea-min-height};
+  --form-textarea-resize: #{$form-textarea-resize};
+
+  // Range
+  --form-range-height: #{$form-range-height};
+  --form-range-thumb-size: #{$form-range-thumb-size};
+  --form-range-bg: #{$form-range-bg};
+  --form-range-thumb-bg: #{$form-range-thumb-bg};
+
+  // File Input
+  --form-file-input-padding: #{$form-file-input-padding};
+  --form-file-input-font-size: #{$form-file-input-font-size};
+  --form-file-input-border-style: #{$form-file-input-border-style};
+  --form-file-input-bg: #{$form-file-input-bg};
+  --form-file-input-bg-hover: #{$form-file-input-bg-hover};
+}

package/src/tokens/_glassmorphism.scss

@@ -0,0 +1,60 @@
+// ============================================================================
+// Glassmorphism Tokens (Technical Glass Design)
+// ============================================================================
+
+// Glass Background Colors (milky, desaturated)
+$glass-bg-light: rgba(255, 255, 255, 0.05);
+$glass-bg-medium: rgba(255, 255, 255, 0.08);
+$glass-bg-heavy: rgba(255, 255, 255, 0.12);
+$glass-bg-etched: rgba(255, 255, 255, 0.15); // For table headers (etched glass)
+
+// Backdrop Blur (subtle, reduced)
+$glass-blur-sm: 2px;
+$glass-blur-md: 4px;
+$glass-blur-lg: 6px;
+$glass-blur-xl: 8px;
+
+// Glass Borders (cool, slightly bright on dark ground)
+$glass-border-light: rgba(255, 255, 255, 0.1);
+$glass-border-medium: rgba(255, 255, 255, 0.15);
+$glass-border-heavy: rgba(255, 255, 255, 0.2);
+
+// Glass Shadows (subtle gray, no colorful glows)
+$glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
+$glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
+$glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);
+
+// Technical Border Radius (max 4px)
+$tech-border-radius-none: 0;
+$tech-border-radius-sm: 2px;
+$tech-border-radius-md: 4px;
+
+// Export as CSS Custom Properties
+:root {
+  // Glass Backgrounds
+  --glass-bg-light: #{$glass-bg-light};
+  --glass-bg-medium: #{$glass-bg-medium};
+  --glass-bg-heavy: #{$glass-bg-heavy};
+  --glass-bg-etched: #{$glass-bg-etched};
+
+  // Backdrop Blur
+  --glass-blur-sm: #{$glass-blur-sm};
+  --glass-blur-md: #{$glass-blur-md};
+  --glass-blur-lg: #{$glass-blur-lg};
+  --glass-blur-xl: #{$glass-blur-xl};
+
+  // Glass Borders
+  --glass-border-light: #{$glass-border-light};
+  --glass-border-medium: #{$glass-border-medium};
+  --glass-border-heavy: #{$glass-border-heavy};
+
+  // Glass Shadows
+  --glass-shadow-sm: #{$glass-shadow-sm};
+  --glass-shadow-md: #{$glass-shadow-md};
+  --glass-shadow-lg: #{$glass-shadow-lg};
+
+  // Technical Border Radius
+  --tech-border-radius-none: #{$tech-border-radius-none};
+  --tech-border-radius-sm: #{$tech-border-radius-sm};
+  --tech-border-radius-md: #{$tech-border-radius-md};
+}

package/src/tokens/_shadows.scss

@@ -0,0 +1,24 @@
+// ============================================================================
+// Shadow Tokens (Elevation System)
+// ============================================================================
+
+// Box Shadows
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+$shadow-none: none;
+
+// Export as CSS Custom Properties
+:root {
+  --shadow-sm: #{$shadow-sm};
+  --shadow-md: #{$shadow-md};
+  --shadow-lg: #{$shadow-lg};
+  --shadow-xl: #{$shadow-xl};
+  --shadow-2xl: #{$shadow-2xl};
+  --shadow-inner: #{$shadow-inner};
+  --shadow-none: #{$shadow-none};
+}
+