/**
 * SCSS Variables
 * 
 * Centralized design tokens for consistent theming
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

// Color Palette
$primary-blue: #2563eb;
$primary-blue-dark: #1d4ed8;
$primary-blue-light: #3b82f6;

$success-green: #22c55e;
$success-green-dark: #16a34a;
$success-green-light: #34d399;

$warning-orange: #f59e0b;
$warning-orange-dark: #d97706;
$warning-orange-light: #fbbf24;

$error-red: #ef4444;
$error-red-dark: #dc2626;
$error-red-light: #f87171;

$purple: #8b5cf6;
$purple-dark: #7c3aed;
$purple-light: #a78bfa;

// Neutral Colors
$gray-50: #f9fafb;
$gray-100: #f3f4f6;
$gray-200: #e5e7eb;
$gray-300: #d1d5db;
$gray-400: #9ca3af;
$gray-500: #6b7280;
$gray-600: #4b5563;
$gray-700: #374151;
$gray-800: #1f2937;
$gray-900: #111827;

$white: #ffffff;
$black: #000000;

// Provider Colors
$openai-green: #10a37f;
$openai-green-dark: #0d8f6f;
$claude-orange: #d97757;
$claude-orange-dark: #c96643;

// Background Colors
$bg-primary: $white;
$bg-secondary: $gray-50;
$bg-tertiary: $gray-100;

// Text Colors
$text-primary: $gray-900;
$text-secondary: $gray-700;
$text-tertiary: $gray-500;
$text-muted: $gray-400;

// Border Colors
$border-light: $gray-200;
$border-medium: $gray-300;
$border-dark: $gray-400;

// Spacing Scale
$spacing-xs: 0.25rem;   // 4px
$spacing-sm: 0.5rem;    // 8px
$spacing-md: 0.75rem;   // 12px
$spacing-lg: 1rem;      // 16px
$spacing-xl: 1.25rem;   // 20px
$spacing-2xl: 1.5rem;   // 24px
$spacing-3xl: 2rem;     // 32px
$spacing-4xl: 2.5rem;   // 40px
$spacing-5xl: 3rem;     // 48px

// Enhanced Spacing Scale Map (for utility generation)
$spacing-scale: (
  0: 0,
  1: $spacing-xs,    // 0.25rem
  2: $spacing-sm,    // 0.5rem
  3: $spacing-md,    // 0.75rem
  4: $spacing-lg,    // 1rem
  5: $spacing-xl,    // 1.25rem
  6: $spacing-2xl,   // 1.5rem
  8: $spacing-3xl,   // 2rem
  10: $spacing-4xl,  // 2.5rem
  12: $spacing-5xl,  // 3rem
  16: 4rem,          // 64px
  20: 5rem,          // 80px
  24: 6rem           // 96px
);

// Typography
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font-family-mono: 'SFMono-Regular', 'Monaco', 'Inconsolata', 'Roboto Mono', 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

// Enhanced Typography Scale Map (for utility generation)
$font-sizes: (
  xs: $font-size-xs,
  sm: $font-size-sm,
  base: $font-size-base,
  lg: $font-size-lg,
  xl: $font-size-xl,
  2xl: $font-size-2xl,
  3xl: $font-size-3xl,
  4xl: $font-size-4xl
);

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

$line-height-tight: 1.25;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

// Border Radius
$radius-sm: 4px;
$radius-md: 6px;
$radius-lg: 8px;
$radius-xl: 12px;
$radius-2xl: 16px;
$radius-3xl: 20px;
$radius-full: 9999px;

// Enhanced Border Radius Scale Map (for utility generation)
$border-radius: (
  none: 0,
  sm: $radius-sm,
  base: $radius-md,
  md: $radius-md,
  lg: $radius-lg,
  xl: $radius-xl,
  2xl: $radius-2xl,
  3xl: $radius-3xl,
  full: $radius-full
);

// Shadows
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

// Transitions
$transition-fast: 0.15s ease-in-out;
$transition-normal: 0.2s ease-in-out;
$transition-slow: 0.3s ease-in-out;

// 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;

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

// Container Widths
$container-sm: 640px;
$container-md: 768px;
$container-lg: 1024px;
$container-xl: 1280px;
$container-2xl: 1400px;

// Component Specific Variables

// Buttons
$button-height-sm: 2rem;
$button-height-md: 2.5rem;
$button-height-lg: 3rem;

$button-padding-sm: $spacing-sm $spacing-md;
$button-padding-md: $spacing-md $spacing-lg;
$button-padding-lg: $spacing-lg $spacing-xl;

// Cards
$card-padding: $spacing-2xl;
$card-border-radius: $radius-xl;
$card-shadow: $shadow-md;

// Forms
$input-height: 2.75rem;
$input-padding: $spacing-md $spacing-lg;
$input-border-radius: $radius-md;

// Dashboard
$dashboard-card-min-height: 140px;
$dashboard-gap: $spacing-2xl;
$dashboard-icon-size: 3rem;

// Header
$header-height: 4rem;
$header-padding: $spacing-lg $spacing-xl;

// Sidebar
$sidebar-width: 200px;
$sidebar-gap: $spacing-md;

// Animation Curves
$ease-in-out-cubic: cubic-bezier(0.4, 0, 0.2, 1);
$ease-out-cubic: cubic-bezier(0, 0, 0.2, 1);
$ease-in-cubic: cubic-bezier(0.4, 0, 1, 1);

// Gradients
$gradient-primary: linear-gradient(135deg, #{$primary-blue} 0%, #{$primary-blue-light} 100%);
$gradient-success: linear-gradient(135deg, #{$success-green} 0%, #{$success-green-light} 100%);
$gradient-warning: linear-gradient(135deg, #{$warning-orange} 0%, #{$warning-orange-light} 100%);
$gradient-card: linear-gradient(135deg, #{$white} 0%, #{$gray-50} 100%);

// Provider Gradients
$gradient-openai: linear-gradient(135deg, #{$openai-green} 0%, #{$openai-green-dark} 100%);
$gradient-claude: linear-gradient(135deg, #{$claude-orange} 0%, #{$claude-orange-dark} 100%);

// Utility Mixins
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@mixin focus-ring {
  outline: none;
  box-shadow: 0 0 0 2px $primary-blue;
}

@mixin card-hover {
  transition: all $transition-normal;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: $shadow-lg;
  }
}