// Design Tokens - Base Values
$spacing-unit: 8px;
$spacing-scale: (
  "0": 0,
  // 0px (s-0)
  "s-1": $spacing-unit * 0.5,
  // 4px (s-1) - Figma token
  "xs": $spacing-unit * 0.5,
  // 4px (alias for s-1)
  "s-1h": $spacing-unit * 0.75,
  // 6px (s-1h) - Figma token for border-radius
  "s-2": $spacing-unit,
  // 8px (s-2) - Figma token
  "sm": $spacing-unit,
  // 8px (alias for s-2)
  "s-2h": $spacing-unit * 1.25,
  // 10px (s-2h) - Figma token
  "s-3": $spacing-unit * 1.5,
  // 12px (s-3)
  "md": $spacing-unit * 2,
  // 16px
  "lg": $spacing-unit * 3,
  // 24px
  "xl": $spacing-unit * 4,
  // 32px
  "2xl": $spacing-unit * 6,
  // 48px
  "3xl": $spacing-unit * 8, // 64px
);

// Breakpoints
$breakpoints: (
  "mobile": 320px,
  "tablet": 768px,
  "desktop": 1024px,
  "wide": 1440px,
  "ultrawide": 1920px,
);

// Individual breakpoint variables for convenience
$breakpoint-mobile: 320px;
$breakpoint-tablet: 768px;
$breakpoint-md: 768px;  // Alias for tablet
$breakpoint-content: 960px;  // Admin content area breakpoint (viewport - WP sidebar - SC sidebar ~= 500px overhead)
$breakpoint-desktop: 1024px;
$breakpoint-lg: 1024px;  // Alias for desktop
$breakpoint-wide: 1440px;
$breakpoint-xl: 1440px;  // Alias for wide
$breakpoint-ultrawide: 1920px;

// Typography Scale (Figma Design Tokens)
$font-family-base:
  "Inter",
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  sans-serif;
$font-family-heading: $font-family-base;
$font-family-mono: "Fira Code", "Courier New", monospace;

// Figma Typography Scale
$font-sizes: (
  "metadata-small": 11px,
  "metadata": 12px,
  "xs": 12px,
  "caption": 13px,
  "sm": 14px,
  "body-small": 14px,
  "base": 16px,
  "body": 16px,
  "lg": 18px,
  "body-large": 18px,
  "xl": 20px,
  "heading-4": 22px,
  "2xl": 24px,
  "heading-3": 28px,
  "3xl": 30px,
  "4xl": 36px,
  "heading-2": 40px,
  "heading-1": 48px,
  "5xl": 48px,
  "display-1": 56px,
);

$font-weights: (
  "light": 300,
  "normal": 400,
  "regular": 400,
  "medium": 500,
  "semibold": 600,
  "bold": 700,
);

// Elevation/Shadow System
$shadows: (
  "xs": 0 1px 2px 0 rgba(0, 0, 0, 0.05),
  "sm": 0 1px 3px 0 rgba(0, 0, 0, 0.1),
  "md": 0 4px 6px -1px rgba(0, 0, 0, 0.1),
  "lg": 0 10px 15px -3px rgba(0, 0, 0, 0.1),
  "xl": 0 20px 25px -5px rgba(0, 0, 0, 0.1),
  "2xl": 0 25px 50px -12px rgba(0, 0, 0, 0.25),
);

// Border Radius
$radius: (
  "sm": 4px,
  "md": 8px,
  "lg": 12px,
  "xl": 16px,
  "full": 9999px,
);

// Transitions
$transition-duration: (
  "fast": 150ms,
  "base": 250ms,
  "slow": 350ms,
);

$transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

// Z-index Scale
$z-index: (
  "dropdown": 1000,
  "sticky": 1020,
  "fixed": 1030,
  "modal-backdrop": 1040,
  "modal": 1050,
  "popover": 1060,
  "tooltip": 1070,
);

// ============================================
// FIGMA COLOR PALETTE (Light Mode Defaults)
// ============================================

// Primary Colors (Purple)
$color-primary: #5f5bf3;
$color-primary-light: #938cfc;
$color-primary-dark: #4744c4;
$color-primary-on-primary: #ffffff;

// Brand Gradient
$gradient-brand-start: rgb(199, 81, 192);
$gradient-brand-end: rgb(65, 88, 208);
$gradient-brand: linear-gradient(112.87deg, $gradient-brand-start 0%, $gradient-brand-end 100%);

// Secondary Colors (Red/Pink)
$color-secondary: #b3425a;
$color-secondary-light: #ff7b96;
$color-secondary-dark: #8a3346;

// Semantic Colors
$color-success: #10b981;
$color-warning: #fbbf24;
$color-danger: #ef4444;
$color-info: #3b82f6;

// Semantic Containers (light backgrounds for alerts/badges)
$color-container-info: #dbeafe;
$color-container-warning: #fef3c7;
$color-container-danger: #fee2e2;
$color-container-success: #d1fae5;
$color-container-accent: #ecebff;

// Semantic Borders
$color-border-info: #b5cae0;
$color-border-warning: #ecdca2;
$color-border-danger: #e2bdbd;
$color-border-success: #a0d3b5;
$color-border-accent: #b7a8f7;

// Text Colors
$color-text-primary: #1a1a1a;
$color-text-secondary: #4b4b4b;
$color-text-tertiary: #6a6a6a;

// Background Colors
$color-background: #fafafa;
$color-background-alt: #f2f2f2;

// Surface Colors (cards, modals, etc.)
$color-surface: #ffffff;
$color-surface-alt: #f7f7f7;

// Grey Scale
$color-grey-light: #f7f7f7;
$color-grey-soft: #eaeaea;
$color-grey-neutral: #d4d4d4;
$color-grey-dark: #a5a5a5;

// Border
$color-border: #eaeaea;

// Legacy gray scale (for compatibility)
$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;