:root {
  /* Primary Brand Colors */
  --brand-primary: #6b4fa0; /* Primary purple color for branding and accents */
  --brand-primary-light: #9b7ec7; /* Light purple for subtle highlights */
  --brand-primary-dark: #4a3570; /* Dark purple for depth */
  
  /* Background Colors */
  --bg-primary: #f5f7fa; /* Main light background */
  --bg-secondary: #ffffff; /* Secondary background (white) */
  --bg-tertiary: #e8ecf2; /* Lighter background variation */
  
  /* Text Colors */
  --text-primary: #1a2332; /* Primary text color (dark) */
  --text-secondary: rgba(26, 35, 50, 0.84); /* Secondary text with slight transparency */
  --text-light: rgba(26, 35, 50, 0.6); /* Light text for less emphasis */
  --text-light-03: rgba(26, 35, 50, 0.3); /*  Light text 30% opacity */
  
  /* Accent Colors */
  --accent-green: #4caf50; /* Success/positive accent color */
  --accent-blue: #2196f3; /* Information accent color */
  --accent-orange: #ff9800; /* Warning/highlight accent color */
  
  /* RGBA Color Variables - Brand Primary Purple */
  --brand-primary-rgb-007: rgba(107, 79, 160, 0.065); /* Brand purple 6.5% opacity */
  --brand-primary-rgb-012: rgba(107, 79, 160, 0.125); /* Brand purple 12.5% opacity */
  --brand-primary-rgb-022: rgba(107, 79, 160, 0.225); /* Brand purple 22.5% opacity */
  --brand-primary-rgb-03: rgba(107, 79, 160, 0.3); /* Brand purple 30% opacity */
  --brand-primary-rgb-045: rgba(107, 79, 160, 0.45); /* Brand purple 45% opacity */
  
  /* RGBA Color Variables - Background Secondary */
  --bg-secondary-rgb-015: rgba(255, 255, 255, 0.15); /* Secondary background 15% opacity */
  --bg-secondary-rgb-035: rgba(255, 255, 255, 0.35); /* Secondary background 35% opacity */
  --bg-secondary-rgb-055: rgba(255, 255, 255, 0.55); /* Secondary background 55% opacity */
  
  /* RGBA Color Variables - Background Primary */
  --bg-primary-rgb-07: rgba(245, 247, 250, 0.7); /* Primary background 70% opacity */
  --bg-primary-rgb-094: rgba(245, 247, 250, 0.94); /* Primary background 94% opacity */
  
  
  
  /* RGBA Color Variables - Transparent */
  --transparent: transparent; /* Fully transparent */
  
  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%); /* Primary brand gradient */
  --gradient-background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); /* Background gradient */
  
  /* Overlay & Backdrop Colors */
  --overlay-light: var(--brand-primary-rgb-007); /* Light brand overlay */
  --overlay-medium: var(--bg-secondary-rgb-035); /* Medium light overlay */
  --overlay-dark: var(--bg-secondary-rgb-055); /* Light overlay */
  --overlay-darker: var(--bg-primary-rgb-07); /* Lighter overlay */
  --overlay-darkest: var(--bg-primary-rgb-094); /* Lightest overlay */
  --overlay-section: var(--bg-secondary-rgb-015); /* Section background overlay */
  --overlay-card: var(--bg-secondary-rgb-035); /* Card background overlay */
  --overlay-card-hover: var(--bg-secondary-rgb-055); /* Card hover background overlay */
  
  /* Border Colors */
  --border-primary: var(--brand-primary-rgb-022); /* Primary border with brand color */
  --border-light: var(--brand-primary-rgb-012); /* Light border */
  --border-accent: var(--brand-primary-rgb-03); /* Accent border */
  
  /* Special Effect Colors */
  --effect-radial-gradient: radial-gradient(circle, var(--brand-primary-rgb-012) 1px, var(--transparent) 1px); /* Dot pattern effect */
  --effect-radial-glow: radial-gradient(circle at 20% 50%, var(--brand-primary-rgb-012) 0%, var(--transparent) 50%); /* Radial glow effect */
  --effect-shine: linear-gradient(90deg, var(--transparent), var(--brand-primary-rgb-012), var(--transparent)); /* Shine/shimmer effect */
  --effect-button-ripple: var(--text-light-03); /* Button ripple effect */
  --effect-gradient-overlay-1: linear-gradient(135deg, var(--brand-primary-rgb-007) 0%, var(--bg-secondary-rgb-015) 100%); /* Gradient overlay variant 1 */
  --effect-gradient-overlay-2: linear-gradient(135deg, var(--brand-primary-rgb-012) 0%, var(--bg-secondary-rgb-015) 100%); /* Gradient overlay variant 2 */
  --effect-gradient-info: linear-gradient(135deg, var(--brand-primary-rgb-007) 0%, var(--bg-secondary-rgb-035) 100%); /* Info box gradient */
  
  /* Shadow Colors */
  --shadow-brand-12: var(--brand-primary-rgb-012); /* Brand shadow 12.5% opacity */
  --shadow-brand-22: var(--brand-primary-rgb-022); /* Brand shadow 22.5% opacity */
  --shadow-brand-30: var(--brand-primary-rgb-03); /* Brand shadow 30% opacity */
  --shadow-brand-45: var(--brand-primary-rgb-045); /* Brand shadow 45% opacity */
  
  /* Background Navbar Color */
  --bg-navbar: var(--bg-primary-rgb-094); /* Navbar background with transparency */
  
  /* Decorative Element Colors */
  --decorative-icon-light: var(--brand-primary-rgb-022); /* Light decorative icon color */
  --decorative-brain-opacity: 0.6; /* Brain icon opacity */
  --decorative-pattern-opacity: 0.3; /* Pattern opacity */
  
  /* SVG Pattern Colors */
  --svg-dot-color: var(--brand-primary-rgb-012); /* SVG dot pattern color */
  
  /* Typography - Font Families */
 
  --font-primary: "Inter", sans-serif; /* Primary font for body text */
  --font-headings: "Merriweather", serif; /* Font for headings */
  
  /* Typography - Font Sizes */
  --font-size-base: 16px; /* Base font size */
  --font-size-xs: 0.9rem; /* Extra small text */
  --font-size-sm: 0.95rem; /* Small text */
  --font-size-md: 1rem; /* Medium text (default) */
  --font-size-lg: 1.07rem; /* Large/extra large text */
  --font-size-2xl: 1.15rem; /* 2X large text */
  --font-size-3xl: 1.3rem; /* 3X-5X large text */
  --font-size-6xl: 1.6rem; /* 6X large text */
  
  /* Typography - Heading Sizes */
  --heading-sm: 1.25rem; /* Small to large heading */
  --heading-xl: 2rem; /* Extra large heading */
  --heading-2xl: 2.7rem; /* 2X-3X large heading */
  --heading-4xl: 3.85rem; /* 4X-5X large heading */
  
  /* Typography - Display Sizes */
  --display-sm: 2.5rem; /* Small display text */
  --display-md: 3rem; /* Medium display text */
  --display-lg: 4.5rem; /* Large display text */
  
  /* Typography - Font Weights */
  --font-weight-normal: 400; /* Normal weight */
  --font-weight-medium: 500; /* Medium weight */
  --font-weight-semibold: 600; /* Semi-bold weight */
  --font-weight-bold: 700; /* Bold weight */
  --font-weight-extrabold: 800; /* Extra bold weight */
  --font-weight-black: 900; /* Black weight */
  
  /* Typography - Line Heights */
  --line-height-tight: 1.35; /* Tight/snug line height for headings */
  --line-height-normal: 1.6; /* Normal line height */
  --line-height-relaxed: 1.75; /* Relaxed/loose line height for readability */
  
  /* Typography - Letter Spacing */
  --letter-spacing-tight: -1px; /* Tight letter spacing for large headings */
  --letter-spacing-medium: -0.4px; /* Medium/small letter spacing */
  --letter-spacing-normal: 0.3px; /* Normal letter spacing */
  
  /* Spacing */
  --spacing-xs: 0.5rem; /* Extra small spacing */
  --spacing-sm: 0.8rem; /* Small spacing */
  --spacing-md: 1rem; /* Medium spacing */
  --spacing-lg: 1.5rem; /* Large spacing */
  --spacing-xl: 2rem; /* Extra large spacing */
  --spacing-2xl: 2.75rem; /* 2X-3X large spacing */
  
  /* Border Radius */
  --radius-sm: 8px; /* Small border radius */
  --radius-md: 13px; /* Medium/large border radius */
  --radius-xl: 20px; /* Extra large border radius */
  --radius-full: 50px; /* Full/pill border radius */
  --radius-circle: 50%; /* Circle border radius */
  
  /* Shadows */
  --shadow-sm: 0 4px 30px var(--shadow-brand-12); /* Small shadow */
  --shadow-md: 0 10px 30px var(--shadow-brand-30); /* Medium shadow */
  --shadow-lg: 0 15px 40px var(--shadow-brand-45); /* Large shadow */
  --shadow-xl: 0 20px 60px var(--shadow-brand-30); /* Extra large shadow */
  --shadow-navbar: 0 4px 30px var(--shadow-brand-22); /* Navbar shadow */
  --shadow-icon-hover: 0 15px 40px var(--shadow-brand-45); /* Icon hover shadow */
  
  /* Transitions */
  --transition-fast: 0.3s ease; /* Fast transition */
  --transition-medium: 0.45s ease; /* Medium transition */
  --transition-slow: 0.8s ease; /* Slow transition */
  --transition-ripple: 0.6s; /* Button ripple transition */
  
  /* Icon Sizes */
  --icon-xs: 0.9rem; /* Extra small icon */
  --icon-sm: 1.5rem; /* Small icon */
  --icon-md: 2.2rem; /* Medium icon */
  --icon-lg: 3rem; /* Large icon */
  --icon-xl: 3.5rem; /* Extra large icon */
  --icon-2xl: 55px; /* 2X-4X large icon */
  --icon-5xl: 300px; /* 5X large icon */
  
  /* Component Sizes */
  --button-padding: 1rem 2.65rem; /* Button padding */
  --card-padding: 3rem; /* Card padding */
  --card-padding-sm: 2.25rem; /* Small/medium card padding */
  --info-padding: 1.8rem 2rem; /* Info box/challenge item padding */
  
  /* Component Dimensions */
  --feature-icon-size: 85px; /* Feature icon container size */
  --timeline-number-size: 70px; /* Timeline number circle size */
  --particle-size: 3px; /* Particle effect size */
  --border-width-thick: 2.5px; /* Thick border width */
  --border-width-medium: 4px; /* Medium border width */
  --border-width-thin: 1px; /* Thin border width */
}