:root {
  /* Colors */
  --color-primary: #004144;
  --color-accent: #b94d38;
  --color-white: #ffffff;
  --color-dark: #002a2c;
  --color-hover: #a03d2e;
  --color-background: #fff;
  --color-opacity-hover: 0.7;
  
  /* Spacing */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 20px;
  --gap-xl: 25px;
  --gap-xxl: 30px;
  --gap-xxxl: 40px;
  
  /* Padding */
  --padding-xs: 10px;
  --padding-sm: 15px;
  --padding-md: 20px;
  --padding-lg: 30px;
  --padding-xl: 40px;
  --padding-xxl: 60px;
  
  /* Responsive padding */
  --padding-mobile: 20px;
  --padding-tablet: 30px;
  --padding-desktop: 40px;
  --padding-large: 60px;
  
  /* Font sizes */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 15px;
  --font-base: 16px;
  --font-lg: 20px;
  --font-xl: 22px;
  --font-xxl: 50px;
  --font-xxxl: 60px;
  --font-huge: 70px;
  
  /* Font families */
  --font-freight: 'FreightBig Pro',serif;
  --font-bold: 'NeueHansKendrick-Bold', sans-serif;
  --font-light: 'NeueHansKendrick-Light', sans-serif;
  
  /* Line heights */
  --line-tight: 1.1;
  --line-normal: 1.4;
  --line-relaxed: 1.6;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xxl: 70px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.6s ease;
  
  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-overlay: 400;
  --z-tooltip: 500;
  --z-header: 1000;
  --z-nav: 999;
  
  /* Layout */
  --container-max: 1200px;
  --content-max: 40em;
  
  /* Component sizes */
  --logo-width-sm: 60px;
  --logo-width-md: 80px;
  --logo-width-lg: 90px;
  --logo-width-xl: 105px;
  --logo-width-xxl: 140px;
  --logo-width-huge: 180px;
  
  --icon-size-sm: 20px;
  --icon-size-md: 30px;
  --icon-size-lg: 35px;
  --icon-size-xl: 45px;
  --icon-size-xxl: 120px;
  
  /* Button sizes */
  --btn-padding-sm: 10px 15px;
  --btn-padding-md: 10px 20px;
  --btn-padding-lg: 15px 30px;
  
  /* Form elements */
  --input-padding: 10px 15px;
  --input-width-sm: 200px;
  --input-width-md: 250px;
  
  /* Animations */
  --fade-distance: 30px;
  --scale-hover: 1.1;
  
  /* Focus */
  --focus-width: 2px;
  --focus-offset: 2px;
  
  /* Borders */
  --border-light: 1px solid var(--color-accent);
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}