// =============================================================================
// VARIABLES - Alt Audit Plugin
// =============================================================================

// -------------------------------------
// Apple Design System Variables
// -------------------------------------

// Color Palette - Apple System Colors
$color-primary: #007aff;
$color-primary-dark: #0056d6;
$color-primary-light: #99c7ff;
$color-success: #34c759;
$color-success-dark: #28a745;
$color-success-light: #7ed478;
$color-warning: #ff9500;
$color-warning-dark: #e68900;
$color-warning-light: #ffb84d;
$color-error: #ff3b30;
$color-error-dark: #d70015;
$color-error-light: #ff7a73;
$color-info: #5ac8fa;
$color-info-dark: #32ade6;
$color-info-light: #9ee0ff;
$color-purple: #af52de;
$color-purple-dark: #8e44ad;
$color-purple-light: #d4a7ff;

// Gray Scale - Apple System Grays
$color-gray-50: #fafafa;
$color-gray-100: #f5f5f7;
$color-gray-200: #e5e5e7;
$color-gray-300: #d2d2d7;
$color-gray-400: #aeaeb2;
$color-gray-500: #8e8e93;
$color-gray-600: #636366;
$color-gray-700: #48484a;
$color-gray-800: #2c2c2e;
$color-gray-900: #1c1c1e;

// Status Colors for Alt Audit
$color-missing: $color-error;
$color-decorative: $color-info;
$color-weak: $color-warning;
$color-good: $color-success;
$color-excellent: $color-purple;

// Background Colors
$color-background: #fff;
$color-background-secondary: $color-gray-50;
$color-background-tertiary: $color-gray-100;
$color-surface: #fff;

// -------------------------------------
// Typography
// -------------------------------------

// Font Families - Apple System Fonts
$font-primary: -apple-system, blinkmacsystemfont, 'SF Pro Display', 'Helvetica Neue', helvetica, arial, sans-serif;
$font-secondary: -apple-system, blinkmacsystemfont, 'SF Pro Text', 'Helvetica Neue', helvetica, arial, sans-serif;
$font-mono: 'SF Mono', monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;

// Font Sizes
$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 Weights
$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.25;
$line-height-snug: 1.375;
$line-height-normal: 1.5;
$line-height-relaxed: 1.625;
$line-height-loose: 2;

// -------------------------------------
// Spacing
// -------------------------------------

// Spacing Scale - Apple 4pt Grid
$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-8: 2rem; // 32px
$space-10: 2.5rem; // 40px
$space-12: 3rem; // 48px
$space-16: 4rem; // 64px
$space-20: 5rem; // 80px
$space-24: 6rem; // 96px

// Component Spacing
$spacing-xs: $space-1;
$spacing-sm: $space-2;
$spacing-md: $space-4;
$spacing-lg: $space-6;
$spacing-xl: $space-8;
$spacing-2xl: $space-12;

// -------------------------------------
// Border Radius
// -------------------------------------

$radius-none: 0;
$radius-sm: 0.25rem; // 4px
$radius-md: 0.375rem; // 6px
$radius-lg: 0.5rem; // 8px
$radius-xl: 0.75rem; // 12px
$radius-2xl: 1rem; // 16px
$radius-3xl: 1.5rem; // 24px
$radius-full: 9999px;

// Apple Standard Radius
$radius-apple-sm: 8px;
$radius-apple-md: 12px;
$radius-apple-lg: 16px;
$radius-apple-xl: 20px;

// -------------------------------------
// Shadows
// -------------------------------------

// Apple-inspired Shadow System
$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);

// Apple Card Shadows
$shadow-apple-sm: $shadow-sm;
$shadow-apple-md: $shadow-md;
$shadow-apple-lg: $shadow-lg;
$shadow-apple-card: 0 4px 16px rgba(0, 0, 0, 0.12);
$shadow-apple-hover: 0 8px 32px rgba(0, 0, 0, 0.16);
$shadow-apple-focus: 0 0 0 3px rgba(0, 122, 255, 0.3);

// -------------------------------------
// Transitions
// -------------------------------------

// Apple-inspired easing functions
$ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
$ease-apple-in: cubic-bezier(0.42, 0, 1, 1);
$ease-apple-out: cubic-bezier(0, 0, 0.58, 1);
$ease-apple-in-out: cubic-bezier(0.42, 0, 0.58, 1);

// Duration
$duration-fast: 150ms;
$duration-normal: 200ms;
$duration-slow: 300ms;
$duration-slower: 500ms;

// Standard Transitions
$transition-base: all $duration-normal $ease-apple;
$transition-fast: all $duration-fast $ease-apple;
$transition-slow: all $duration-slow $ease-apple;

// -------------------------------------
// Breakpoints
// -------------------------------------

$breakpoints: (
  xs: 480px,
  sm: 768px,
  md: 1024px,
  lg: 1280px,
  xl: 1440px,
);

// -------------------------------------
// Z-Index Scale
// -------------------------------------

$z-index: (
  hide: -1,
  base: 0,
  docked: 10,
  dropdown: 100,
  sticky: 200,
  banner: 300,
  overlay: 400,
  modal: 500,
  popover: 600,
  skiplink: 700,
  toast: 800,
  tooltip: 900,
  max: 999999,
);

// -------------------------------------
// Component Specific Variables
// -------------------------------------

// Cards
$card-padding: $space-6;
$card-radius: $radius-apple-md;
$card-shadow: $shadow-apple-card;
$card-border: 1px solid $color-gray-200;

// Buttons
$button-height: 44px; // Apple touch target
$button-padding-x: $space-6;
$button-padding-y: $space-3;
$button-radius: $radius-apple-sm;
$button-font-weight: $font-weight-semibold;

// Forms
$input-height: 44px;
$input-padding-x: $space-4;
$input-radius: $radius-apple-sm;
$input-border: 1px solid $color-gray-300;
$input-border-focus: 1px solid $color-primary;

// Header
$header-height: 60px;
$header-padding: $space-6;

// Navigation
$nav-item-height: 44px;
$nav-item-padding: $space-4;

// -------------------------------------
// Animation Variables
// -------------------------------------

$animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$animation-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

// Progress Animation
$progress-animation-duration: 1s;
$progress-animation-delay: 0.2s;

// Loading States
$shimmer-animation: shimmer 2s ease-in-out infinite;
$pulse-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

// -------------------------------------
// Dark Mode Variables
// -------------------------------------

$dark-background: $color-gray-900;
$dark-surface: $color-gray-800;
$dark-text-primary: #fff;
$dark-text-secondary: $color-gray-300;
$dark-border: $color-gray-700;