:root {
  /* palette */
  --brand-ink:       		#212529;
  --brand-white:     		#ffffff;
  --brand-teal:      		#008090;
  --brand-teal-dark: 		#045062;
  --brand-teal-dark-100: 	#0b4f6c;
  --brand-teal-mid:  		#08738a;
  --brand-teal-light: 		#139a9a;
  --brand-coral:     		#ff6b61;
  --brand-mint-50:   		#f0fdfa;
  --brand-mint-100:  		#e8f5f3;
  --brand-mint-200:  		#d5f0f2;
  --brand-bg:        		#f8fafc;
  --brand-gray:      		#9ca3af;
  --brand-navy:      		#1b3a57;
  --brand-muted:     		#6b7280; 

  /* roles (change the look of the whole site from here) */
  --brand-bar:      var(--brand-teal-dark);   /* navbar + footer background */
  --brand-on-coral: var(--brand-white);       /* text on coral buttons; switch to ink for better contrast */

  /* gradients */
  --brand-hero: linear-gradient(135deg, var(--brand-teal-dark) 0%, var(--brand-teal) 58%, var(--brand-teal-mid) 100%);
  --brand-cta:  linear-gradient(135deg, var(--brand-teal-dark-100), var(--brand-teal-light));

  /* Bootstrap hooks */
  --bs-primary:        var(--brand-teal);
  --bs-primary-rgb:    0, 128, 144;
  --bs-body-color:     var(--brand-ink);
  --bs-body-bg:        var(--brand-bg);
  --bs-link-color:     var(--brand-teal);
  --bs-link-color-rgb: 0, 128, 144;
}