// ========================================
// SASS Variables - Colors, Typography, Spacing
// ========================================

// Color Palette - oklch color space
$color-primary: oklch(0.64 0.22 334.61);
$color-primary-dark: oklch(0.54 0.20 334.61);
$color-primary-light: oklch(0.74 0.15 334.61);

$color-secondary: oklch(0.59 0.17 39.32);
$color-accent: oklch(0.64 0.22 334.61);

$color-success: oklch(0.72 0.16 149.47);
$color-warning: oklch(0.75 0.19 70.08);
$color-error: oklch(0.57 0.28 25.39);
$color-info: oklch(0.64 0.19 204.86);

$color-neutral-950: oklch(0.13 0.02 316.87);
$color-neutral-900: oklch(0.17 0.03 316.87);
$color-neutral-800: oklch(0.22 0.03 316.87);
$color-neutral-700: oklch(0.32 0.03 316.87);
$color-neutral-600: oklch(0.43 0.03 316.87);
$color-neutral-500: oklch(0.56 0.02 316.87);
$color-neutral-400: oklch(0.73 0.02 316.87);
$color-neutral-300: oklch(0.85 0.02 316.87);
$color-neutral-200: oklch(0.92 0.01 316.87);
$color-neutral-100: oklch(0.97 0.01 316.87);
$color-neutral-50: oklch(0.99 0.005 316.87);

// Background & Foreground
$bg-primary: #ffffff;
$bg-secondary: $color-neutral-50;
$bg-tertiary: $color-neutral-100;

$fg-primary: $color-neutral-950;
$fg-secondary: $color-neutral-600;
$fg-tertiary: $color-neutral-500;

// Typography
$font-family-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-family-heading: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
$font-family-mono: 'JetBrains Mono', 'Courier New', monospace;

$font-size-xs: 0.75rem;      // 12px
$font-size-sm: 0.875rem;     // 14px
$font-size-base: 1rem;       // 16px
$font-size-lg: 1.125rem;     // 18px
$font-size-xl: 1.25rem;      // 20px
$font-size-2xl: 1.5rem;      // 24px
$font-size-3xl: 1.875rem;    // 30px
$font-size-4xl: 2.25rem;     // 36px
$font-size-5xl: 3rem;        // 48px

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// Line Heights
$line-height-tight: 1.2;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

// Spacing - 8px base unit
$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-7: 1.75rem;   // 28px
$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

// Border Radius
$radius-sm: 0.375rem;   // 6px
$radius-md: 0.5rem;     // 8px
$radius-lg: 0.75rem;    // 12px
$radius-xl: 1rem;       // 16px
$radius-2xl: 1.5rem;    // 24px
$radius-full: 9999px;

// 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 -2px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

// Transitions
$transition-fast: 150ms ease-in-out;
$transition-base: 250ms ease-in-out;
$transition-slow: 350ms ease-in-out;

// Breakpoints
$breakpoint-xs: 320px;
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-2xl: 1536px;

// Z-index scale
$z-dropdown: 1000;
$z-sticky: 1020;
$z-fixed: 1030;
$z-modal-backdrop: 1040;
$z-modal: 1050;
$z-popover: 1060;
$z-tooltip: 1070;
