/**
 * ProRank Design System - Core Variables
 * 
 * This is the SINGLE SOURCE OF TRUTH for all design tokens.
 * NEVER use hard-coded colors or spacing - always use these variables.
 * 
 * @module core/variables
 * @since 3.0.0
 */

:root {
  /* ============================================
     BRAND COLORS
     Primary brand colors that define ProRank's identity
     ============================================ */
  
  /* Primary Colors */
  --prorank-primary: #ff6900;         /* Brand Orange - MAIN COLOR */
  --prorank-primary-dark: #e55a00;    /* Darker orange for hover states */
  --prorank-primary-light: #ff8833;   /* Lighter orange for backgrounds */
  --prorank-secondary: #2563eb;       /* Professional Blue - secondary actions */
  --prorank-accent: #ff6b35;          /* Brand Orange - accent color */
  --prorank-pink: #ff6b35;            /* Accent for pro features */
  --prorank-orange: #ff6900;          /* Brand orange (primary) */

  /* Legacy aliases (older UI files still reference these) */
  --pr-primary: var(--prorank-secondary);
  --pr-primary-dark: #1d4ed8;
  --pr-primary-light: #dbeafe;
  --pr-accent-blue: #3b82f6;
  --pr-accent-purple: #3b82f6;
  --pr-purple-600: #2563eb;
  --pr-accent-orange: #ff6b35;
  --pr-accent-green: #10b981;
  --pr-accent-red: #ef4444;
  --pr-accent-red-light: #fca5a5;
  --pr-accent-yellow: #fbbf24;

  /* ============================================
     SEMANTIC COLORS
     Colors with specific meaning across the UI
     ============================================ */
  
  --prorank-success: #10b981;         /* Green for success states */
  --prorank-warning: #fbbf24;         /* Yellow for warnings */
  --prorank-error: #ef4444;           /* Red for errors */
  --prorank-info: #2563eb;            /* Blue for information */

  /* ============================================
     GRADIENTS
     Consistent gradients for premium feel
     ============================================ */
  
  --prorank-gradient: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); /* Main gradient */
  --prorank-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --prorank-gradient-warning: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --prorank-gradient-accent: linear-gradient(135deg, #ff6b35 0%, #ff8554 100%);
  --prorank-gradient-subtle: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);

  /* ============================================
     BACKGROUNDS
     Background colors for different UI levels
     ============================================ */
  
  --prorank-bg: #ffffff;              /* Primary background (white) */
  --prorank-bg-secondary: #f9fafb;    /* Secondary background (light gray) */
  --prorank-bg-tertiary: #f3f4f6;     /* Tertiary background (gray) */

  /* ============================================
     BORDERS
     Border colors for different emphasis levels
     ============================================ */
  
  --prorank-border: #e5e7eb;          /* Default border color */
  --prorank-border-dark: #d1d5db;     /* Darker border for emphasis */
  --prorank-border-light: #f3f4f6;    /* Light border for subtle separation */

  /* ============================================
     TEXT COLORS
     Text colors for hierarchy and emphasis
     ============================================ */

  --prorank-text: #374151;            /* Primary text (charcoal gray) */
  --prorank-text-primary: #374151;    /* Primary text (alias for consistency) */
  --prorank-text-secondary: #6b7280;  /* Secondary text (medium gray) */
  --prorank-text-tertiary: #9ca3af;   /* Tertiary text (light gray) */
  --prorank-text-inverse: #ffffff;    /* Text on dark backgrounds */

  /* ============================================
     SPACING SYSTEM
     Consistent spacing scale (4px base)
     ============================================ */
  
  --prorank-space-xs: 4px;            /* Extra small spacing */
  --prorank-space-sm: 8px;            /* Small spacing */
  --prorank-space-md: 16px;           /* Medium spacing (default) */
  --prorank-space-lg: 24px;           /* Large spacing */
  --prorank-space-xl: 32px;           /* Extra large spacing */
  --prorank-space-2xl: 48px;          /* Double extra large spacing */

  /* ============================================
     BORDER RADIUS
     Consistent corner rounding
     ============================================ */
  
  --prorank-radius: 12px;             /* Default border radius */
  --prorank-radius-sm: 8px;           /* Small radius */
  --prorank-radius-lg: 16px;          /* Large radius */
  --prorank-radius-full: 9999px;      /* Fully rounded (circles) */

  /* ============================================
     SHADOWS
     Elevation and depth system
     ============================================ */
  
  --prorank-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);        /* Default shadow */
  --prorank-shadow-lg: 0 10px 40px rgba(37, 99, 235, 0.15); /* Large shadow */
  --prorank-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);      /* Small shadow */

  /* ============================================
     TRANSITIONS
     Consistent animation timing
     ============================================ */
  
  --prorank-transition: all 0.2s ease;      /* Default transition */
  --prorank-transition-slow: all 0.3s ease; /* Slower transition */

  /* ============================================
     Z-INDEX SCALE
     Layering system for overlapping elements
     ============================================ */
  
  --prorank-z-dropdown: 1000;         /* Dropdowns */
  --prorank-z-modal: 2000;           /* Modals */
  --prorank-z-tooltip: 3000;         /* Tooltips */
  --prorank-z-notification: 4000;    /* Notifications (highest) */
}