:root {
  /* Colors */
  --color-primary: hsla(234, 50%, 64%, 1);
  --color-secondary: hsla(218, 22%, 26%, 1);
  --color-accent: #FF6B6B;
  --color-white: hsla(0, 0%, 100%, 1);
  --color-black: hsla(216, 14%, 14%, 1);
  --color-gray: #60697b;
  --color-charcoal: hsla(218, 22%, 26%, 1);
  --color-violet-blue: hsla(234, 50%, 64%, 1);
  
  /* Colors from style.css */
  --violet-blue-crayola: hsla(234, 50%, 64%, 1);
  --dark-cornflower-blue_a7: hsla(214, 88%, 27%, 0.07);
  --white: hsla(0, 0%, 100%, 1);
  --white_a3: hsla(0, 0%, 100%, 0.03);
  --white_a8: hsla(0, 0%, 100%, 0.08);
  --white_a12: hsla(0, 0%, 100%, 0.12);
  --white_a70: hsla(0, 0%, 100%, 0.7);
  --cultured: hsla(220, 20%, 97%, 1);
  --lavender-web: hsla(233, 52%, 94%, 1);
  --cadet-blue-crayola: hsla(220, 12%, 70%, 1);
  --cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
  --charcoal: hsla(218, 22%, 26%, 1);
  --raisin-black: hsla(216, 14%, 14%, 1);
  --light-gray: hsla(0, 0%, 79%, 1);
  --blue-crayola: hsla(219, 72%, 56%, 1);
  --black-coral: hsla(220, 12%, 43%, 1);
  
  /* Opacity variants */
  --color-white-8: hsla(0, 0%, 100%, 0.08);
  --color-white-12: hsla(0, 0%, 100%, 0.12);
  
  /* Typography */
  --font-family-primary: 'Manrope', sans-serif;
  --font-size-base: 1.6rem;
  --font-size-large: 1.7rem;
  --font-size-small: 1.5rem;
  --font-size-xs: 1.4rem;
  --font-weight-bold: 700;
  --font-weight-normal: 400;
  --line-height-base: 1.7;
  
  /* Typography from style.css */
  --ff-manrope: 'Manrope', sans-serif;
  --fs-1: calc(2.7rem + 1.38vw);
  --fs-2: calc(2.6rem + .66vw);
  --fs-3: 2.2rem;
  --fs-4: 1.9rem;
  --fs-5: 1.8rem;
  --fs-6: 1.7rem;
  --fs-7: 1.5rem;
  --fs-8: 1.4rem;
  --fw-700: 700;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-xxl: 20px;
  --spacing-xxxl: 25px;
  --spacing-huge: 30px;
  
  /* Spacing from style.css */
  --section-padding: 90px;
  
  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 50%;
  --radius-pill: 100px;
  
  /* Border radius from style.css */
  --radius-circle: 50%;
  --radius-10: 10px;
  --radius-8: 8px;
  --radius-6: 6px;
  
  /* Shadows */
  --shadow-light: 0 0 20px hsla(216, 14%, 14%, 0.05);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  /* Shadows from style.css */
  --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
  --shadow-2: 0 0 0 0.05rem hsla(214, 88%, 27%, 0.08), 0 0 1.25rem hsla(216, 14%, 14%, 0.06);
  --shadow-3: 0 0 1.25rem hsla(216, 14%, 14%, 0.04);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.5s ease;
  --transition-navbar: 0.3s ease-in-out;
  
  /* Transitions from style.css */
  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 0.3s ease-in-out;
  
  /* 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;
  
  /* Breakpoints */
  --breakpoint-sm: 575px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  
  /* Layout */
  --container-max-width-sm: 540px;
  --container-max-width-md: 720px;
  --container-max-width-lg: 960px;
  --container-max-width-xl: 1140px;
  --container-max-width-xxl: 1320px;
  
  /* Navbar */
  --navbar-width: 300px;
  --navbar-padding: var(--spacing-huge);
  --navbar-padding-bottom: var(--spacing-xl);
}

/* Dark theme variables */
[data-theme="dark"] {
  --color-primary: hsla(234, 60%, 74%, 1);
  --color-secondary: hsla(218, 12%, 16%, 1);
  --color-white: hsla(216, 14%, 14%, 1);
  --color-black: hsla(0, 0%, 100%, 1);
}