:root {
  --bg-base: hsl(208, 20%, 97%);
  --bg-elevated: hsl(0, 0%, 100%);
  --bg-subtle: hsl(208, 15%, 95%);

  --bg-dark-base: hsl(208, 25%, 10%);
  --bg-dark-elevated: hsl(208, 20%, 15%);
  --bg-dark-subtle: hsl(208, 30%, 8%);
  
    
  --color-primary: #004480;
  --color-primary-hsl: hsl(208, 100%, 25%);
  --color-primary-h: 208;
  --color-primary-s: 100%;
  --color-primary-l: 25%;

  
  --color-primary-tint-05: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) + 5%));
  --color-primary-tint-10: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.9), calc(var(--color-primary-l) + 10%));
  --color-primary-tint-20: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.85), calc(var(--color-primary-l) + 18%));
  --color-primary-tint-30: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.8), calc(var(--color-primary-l) + 27%));
  --color-primary-tint-40: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.7), calc(var(--color-primary-l) + 35%));
  --color-primary-tint-50: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.65), calc(var(--color-primary-l) + 43%));
  --color-primary-tint-60: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.55), calc(var(--color-primary-l) + 50%));
  --color-primary-tint-70: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.45), calc(var(--color-primary-l) + 58%));
  --color-primary-tint-80: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.35), calc(var(--color-primary-l) + 67%));
  --color-primary-tint-90: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.3), calc(var(--color-primary-l) + 78%));
  --color-primary-tint-95: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.25), calc(var(--color-primary-l) + 90%));

  
  --color-primary-shade-05: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 5%));
  --color-primary-shade-10: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.95), calc(var(--color-primary-l) - 10%));
  --color-primary-shade-20: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.9), calc(var(--color-primary-l) - 17%));
  --color-primary-shade-30: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.85), calc(var(--color-primary-l) - 24%));
  --color-primary-shade-40: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.8), calc(var(--color-primary-l) - 30%));
  --color-primary-shade-50: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.75), calc(var(--color-primary-l) - 36%));
  --color-primary-shade-60: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.65), calc(var(--color-primary-l) - 42%));
  --color-primary-shade-70: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.55), calc(var(--color-primary-l) - 50%));
  --color-primary-shade-80: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.45), calc(var(--color-primary-l) - 58%));
  --color-primary-shade-90: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.35), calc(var(--color-primary-l) - 65%));
  --color-primary-shade-95: hsl(var(--color-primary-h), calc(var(--color-primary-s) * 0.25), calc(var(--color-primary-l) - 75%));


  
  --color-primary-trans-05: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.05);
  --color-primary-trans-10: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.95), var(--color-primary-l), 0.1);
  --color-primary-trans-20: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.9), var(--color-primary-l), 0.2);
  --color-primary-trans-30: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.85), var(--color-primary-l), 0.3);
  --color-primary-trans-40: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.8), var(--color-primary-l), 0.4);
  --color-primary-trans-50: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.75), var(--color-primary-l), 0.5);
  --color-primary-trans-60: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.7), var(--color-primary-l), 0.6);
  --color-primary-trans-70: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.6), var(--color-primary-l), 0.7);
  --color-primary-trans-80: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.5), var(--color-primary-l), 0.8);
  --color-primary-trans-90: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.4), var(--color-primary-l), 0.9);


  
  --color-primary-shade-40-trans-05: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.8), calc(var(--color-primary-l) - 30%), 0.05);
  --color-primary-shade-40-trans-10: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.75), calc(var(--color-primary-l) - 30%), 0.1);
  --color-primary-shade-40-trans-20: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.7), calc(var(--color-primary-l) - 30%), 0.2);
  --color-primary-shade-40-trans-30: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.65), calc(var(--color-primary-l) - 30%), 0.3);
  --color-primary-shade-40-trans-40: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.6), calc(var(--color-primary-l) - 30%), 0.4);
  --color-primary-shade-40-trans-50: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.55), calc(var(--color-primary-l) - 30%), 0.5);
  --color-primary-shade-40-trans-60: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.5), calc(var(--color-primary-l) - 30%), 0.6);
  --color-primary-shade-40-trans-70: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.45), calc(var(--color-primary-l) - 30%), 0.7);
  --color-primary-shade-40-trans-80: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.4), calc(var(--color-primary-l) - 30%), 0.8);
  --color-primary-shade-40-trans-90: hsla(var(--color-primary-h), calc(var(--color-primary-s) * 0.35), calc(var(--color-primary-l) - 30%), 0.9);

  --color-secondary: #877555;
  --color-secondary-hsl: hsl(38, 23%, 43%);
  --color-secondary-h: 38;
  --color-secondary-s: 23%;
  --color-secondary-l: 43%;

  
  --color-secondary-tint-05: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 5%));
  --color-secondary-tint-10: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 10%));
  --color-secondary-tint-20: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 20%));
  --color-secondary-tint-30: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 30%));
  --color-secondary-tint-40: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 40%));
  --color-secondary-tint-50: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 50%));
  --color-secondary-tint-60: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 60%));
  --color-secondary-tint-70: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 70%));
  --color-secondary-tint-80: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 80%));
  --color-secondary-tint-90: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 90%));
  --color-secondary-tint-95: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) + 95%));


  
  --color-secondary-shade-05: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 5%));
  --color-secondary-shade-10: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 10%));
  --color-secondary-shade-20: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 20%));
  --color-secondary-shade-30: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 30%));
  --color-secondary-shade-40: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 40%));
  --color-secondary-shade-50: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 50%));
  --color-secondary-shade-60: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 60%));
  --color-secondary-shade-70: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 70%));
  --color-secondary-shade-80: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 80%));
  --color-secondary-shade-90: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 90%));
  --color-secondary-shade-95: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) - 95%));

  --color-white: white;
  --color-grey-05: hsl(0, 0%, 95%);
  --color-grey-10: hsl(0, 0%, 90%);
  --color-grey-20: hsl(0, 0%, 80%);
  --color-grey-30: hsl(0, 0%, 70%);
  --color-grey-40: hsl(0, 0%, 60%);
  --color-grey-50: hsl(0, 0%, 50%);
  --color-grey-60: hsl(0, 0%, 40%);
  --color-grey-70: hsl(0, 0%, 30%);
  --color-grey-80: hsl(0, 0%, 20%);
  --color-grey-90: hsl(0, 0%, 10%);
  --color-grey-95: hsl(0, 0%, 5%);

  --color-text: var(--color-grey-80);
  --color-text-dark: var(--color-grey-90);
  --color-text-light: var(--color-grey-50);
  --color-text-white: white;

  --color-header: var(--color-grey-90);
  --color-header-dark: var(--color-grey-95);
  --color-header-light: var(--color-grey-20);
  --color-header-white: white;

--color-success: hsl(142, 70%, 35%);
--color-success-bg: hsl(142, 50%, 95%);

}