/* Shared CSS Variables - Common Design System with Pure CSS Integration */

:root {
  /* ===== PURE CSS INTEGRATION VARIABLES ===== */
  --pure-primary-color: #4361ee;
  --pure-primary-light: #4895ef;
  --pure-primary-hover: #1d4ed8;
  --pure-primary-dark: #3a0ca3;
  /* Aliases for project-wide shorthand (many files reference these) */
  --primary: var(--pure-primary-color);
  --primary-light: var(--pure-primary-light);
  --primary-hover: var(--pure-primary-hover);
  --primary-dark: var(--pure-primary-dark);
  /* Numeric RGB for rgba() usages */
  --primary-rgb: 67, 97, 238;
  
  --pure-button-padding: 0.75rem 1.5rem;
  --pure-button-padding-sm: 0.5rem 1rem;
  --pure-button-padding-lg: 1rem 2rem;
  
  --pure-input-border: 1px solid var(--border-color);
  --pure-input-border-radius: 0.5rem;
  --pure-input-padding: 0.75rem 1rem;
  --pure-input-padding-sm: 0.5rem 0.75rem;
  --pure-input-padding-lg: 1rem 1.25rem;
  
  --pure-border-radius: 0.5rem;
  --pure-border-radius-sm: 0.375rem;
  --pure-border-radius-lg: 0.75rem;
  
  /* Mobile-first responsive variables */
  --pure-mobile-padding: 0.5rem 0.75rem;
  --pure-mobile-font-size: 0.875rem;
  --pure-tablet-padding: 0.625rem 0.875rem;
  --pure-tablet-font-size: 0.9375rem;
  --pure-desktop-padding: 0.75rem 1.5rem;
  --pure-desktop-font-size: 1rem;

  
  /* Secondary Colors */
  --secondary: #f5f6fa;
  --secondary-light: #f8f9fa;
  --secondary-dark: #e2e8f0;
  
  /* Status Colors */
  --success: #4cc9f0;
  --success-dark: #3a86ff;
  --success-light: #10b981;
  --warning: #f72585;
  --warning-light: #f59e0b;
  --danger: #ff0a54;
  --danger-light: #ef4444;
  
  /* Neutral Colors */
  --light: #f8f9fa;
  --dark: #121629;
  --gray: #6c757d;
  --gray-light: #94a3b8;
  --gray-dark: #64748b;
  
  /* Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-light: #666;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-muted: #f1f5f9;
  
  /* Border Colors */
  --border-color: #e2e8f0;
  --border-light: rgba(255, 255, 255, 0.18);
  --border-dark: #d1d5db;
  
  /* Glass Effect Colors */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: rgba(0, 0, 0, 0.1);
  
  /* Typography */
  --body-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --heading-font: 'Poppins', sans-serif;
  
  /* Spacing Scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --card-border-radius: 16px;
  --element-border-radius: 8px;
  
  /* 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 -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);
  --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --card-shadow: 0 4px 24px rgba(0,0,0,0.07);
  
  /* Transitions */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-speed: 0.3s;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.5s ease;
  
  /* Focus States */
  --focus: 0 0 0 3px rgba(0,122,255,0.25);
  --focus-ring: 0 0 0 3px rgba(67, 97, 238, 0.15);
  
  /* 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;
  
  /* Pure CSS Responsive Breakpoints */
  --pure-breakpoint-sm: 35.5em; /* ≥ 568px */
  --pure-breakpoint-md: 48em;   /* ≥ 768px */
  --pure-breakpoint-lg: 64em;   /* ≥ 1024px */
  --pure-breakpoint-xl: 80em;   /* ≥ 1280px */

  /* ===== Project-specific semantic aliases ===== */
  /* General text alias used in a few places */
  --text: var(--text-primary);

  /* Partner Application CSS aliases */
  --primary-color: var(--pure-primary-color);
  --success-color: var(--success);
  --warning-color: var(--warning);
  --error-color: var(--danger);

  /* Admin User Management theme tokens */
  --admin-primary: var(--pure-primary-color);
  --admin-primary-light: rgba(67, 97, 238, 0.08);
  --admin-secondary: var(--bg-secondary);
  --admin-bg: var(--bg-primary);
  --admin-text: var(--text-primary);
  --admin-text-light: var(--text-secondary);
  --admin-border: var(--border-color);
  --admin-card-radius: var(--radius-lg);
  --admin-card-shadow: var(--card-shadow);
  --admin-transition: var(--transition);
  --admin-danger: var(--danger);
  --admin-warning: var(--warning);
  --admin-accent: var(--success);

  /* eSIM send (keepgo/esim_send.css) */
  --pure-esim-primary: var(--pure-primary-color);
  --pure-esim-success: var(--success);
  --pure-esim-dark: var(--dark);

  /* Public eSIM (keepgo/public_esim.css) */
  --pure-public-primary: var(--pure-primary-color);
  --pure-public-success: var(--success);
  --pure-public-success-dark: var(--success-dark);
  --pure-public-warning: var(--warning);
  --pure-public-danger: var(--danger);
  --pure-public-gray: var(--gray);
  --pure-public-dark: var(--dark);
}