/* ==== 
 --------- (1.02) variables start ---------
 ==== */

:root {
  // Base colors
  --white: #ffffff;
  --black: #000000;
  --transparent: transparent;
  
  // Primary color palette
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;
  
  // Secondary color palette (grays)
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
  --secondary-950: #020617;
  
  // Accent colors
  --accent-blue: #0ea5e9;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --accent-violet: #8b5cf6;
  --accent-rose: #f43f5e;
  --accent-amber: #f59e0b;
  
  // Semantic colors
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  
  // Legacy color mappings for backward compatibility
  --template-bg: var(--white);
  --template-color: var(--secondary-600);
  --primary-color: var(--primary-600);
  --secondary-color: var(--secondary-800);
  --tertiary-color: var(--secondary-500);
  --quaternary-color: var(--primary-600);
  --quinary-color: var(--secondary-100);
  
  // Enterprise colors
  --enterprise-blue: var(--primary-600);
  --enterprise-dark-blue: var(--primary-800);
  --enterprise-light-blue: var(--primary-400);
  --enterprise-gray: var(--secondary-500);
  --enterprise-light-gray: var(--secondary-50);
  
  // Gold enterprise colors
  --enterprise-gold: #d4af37;
  --enterprise-dark-gold: #b8941f;
  --enterprise-light-gold: #f4d03f;
  --enterprise-gold-accent: #ffd700;

  // Typography - Enterprise Grade Fonts
  --font-family-sans: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-family-display: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  // Font weights
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  // Font sizes
  --text-xs: 0.75rem;    // 12px
  --text-sm: 0.875rem;   // 14px
  --text-base: 1rem;     // 16px
  --text-lg: 1.125rem;   // 18px
  --text-xl: 1.25rem;    // 20px
  --text-2xl: 1.5rem;    // 24px
  --text-3xl: 1.875rem;  // 30px
  --text-4xl: 2.25rem;   // 36px
  --text-5xl: 3rem;      // 48px
  --text-6xl: 3.75rem;   // 60px
  --text-7xl: 4.5rem;    // 72px
  --text-8xl: 6rem;      // 96px
  --text-9xl: 8rem;      // 128px
  
  // Line heights
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  // Spacing scale
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  // 2px
  --space-1: 0.25rem;     // 4px
  --space-1-5: 0.375rem;  // 6px
  --space-2: 0.5rem;      // 8px
  --space-2-5: 0.625rem;  // 10px
  --space-3: 0.75rem;     // 12px
  --space-3-5: 0.875rem;  // 14px
  --space-4: 1rem;        // 16px
  --space-5: 1.25rem;     // 20px
  --space-6: 1.5rem;      // 24px
  --space-7: 1.75rem;     // 28px
  --space-8: 2rem;        // 32px
  --space-9: 2.25rem;     // 36px
  --space-10: 2.5rem;     // 40px
  --space-11: 2.75rem;    // 44px
  --space-12: 3rem;       // 48px
  --space-14: 3.5rem;     // 56px
  --space-16: 4rem;       // 64px
  --space-20: 5rem;       // 80px
  --space-24: 6rem;       // 96px
  --space-28: 7rem;       // 112px
  --space-32: 8rem;       // 128px
  --space-36: 9rem;       // 144px
  --space-40: 10rem;      // 160px
  --space-44: 11rem;      // 176px
  --space-48: 12rem;      // 192px
  --space-52: 13rem;      // 208px
  --space-56: 14rem;      // 224px
  --space-60: 15rem;      // 240px
  --space-64: 16rem;      // 256px
  --space-72: 18rem;      // 288px
  --space-80: 20rem;      // 320px
  --space-96: 24rem;      // 384px
  
  // Border radius
  --radius-none: 0;
  --radius-sm: 0.125rem;   // 2px
  --radius-base: 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;
  
  // Shadows
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-none: 0 0 #0000;
  
  // Legacy shadow mappings
  --shadow: var(--shadow-md);
  --shadow-secondary: var(--shadow-lg);
  
  // Transitions and animations
  --transition-none: none;
  --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-default: all 0.3s ease-in-out;
  --transition-colors: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  
  // Legacy transition mapping
  --transition: var(--transition-default);
  
  // Animation durations
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;
  
  // Animation timing functions
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  // Z-index scale
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
  
  // Breakpoints (for reference in media queries)
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  // Container max widths
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  // Glassmorphism
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-backdrop: blur(10px);
  
  // Dark mode colors
  --dark-bg: var(--secondary-900);
  --dark-surface: var(--secondary-800);
  --dark-text: var(--secondary-100);
  --dark-text-secondary: var(--secondary-300);
}

/* ==== 
 --------- (1.02) variables end ---------
 ==== */