/* ====================
   COLOR PALETTE: Hex Codes
   ==================== */
:root {
--maroon-text: #8F6378;
--maroon-bg: #FEF3F6;

--fuchsia-text: #894DAA;
--fuchsia-bg: #FFE9F0;

--brown-text: #755118;
--brown-bg: #FEF5E1;

--teal-text: #387888;
--teal-bg: #FEFFD7;

--green-text: #18754A;
--green-bg: #F1FEE1;

--moss-text: #7B9F47;
--moss-bg: #FEFCE1;

--aqua-text: #3F968C;
--aqua-bg: #F3FFFF;

--blue-text: #4D6493;
--blue-bg: #F5FDFF;

--lavender-text: #656AAB;
--lavender-bg: #F8FCFE;

--purple-text: #775CA1;
--purple-bg: #FCF8FF;

--grey-text: #828281;
--grey-bg: #F6F6F4;

--rust-bg: #edf1b8;
--rust-border: #b33b1e;
--rust-text: #b85a2b;

--cornflower-bg: #dfe7f7;
--cornflower-border: #4d5ca8;
--cornflower-text: #5960b2;

--olive-bg: #edf0c7;
--olive-border: #2f7c25;
--olive-text: #77611d;

--denim-text: #4F749A;
--denim-bg: #FFFFDA;
}

/* ====================
TEXT BOX COLOR VARIANTS
======================== */
.text-box--maroon { 
background: var(--maroon-bg);    
border-color: var(--maroon-text); 
}

.text-box--maroon p { 
color: var(--maroon-text); 
}

.text-box--fuchsia { 
background: var(--fuchsia-bg);   
border-color: var(--fuchsia-text); 
}

.text-box--fuchsia p { 
color: var(--fuchsia-text); 
}

.text-box--brown { 
background: var(--brown-bg);    
border-color: var(--brown-text); 
}

.text-box--brown p { 
color: var(--brown-text); 
}

.text-box--teal { 
background: var(--teal-bg);      
border-color: var(--teal-text); }

.text-box--teal p { 
color: var(--teal-text); 
}

.text-box--green { 
background: var(--green-bg);     
border-color: var(--green-text); 
}

.text-box--green p { 
color: var(--green-text); 
}

.text-box--moss {
  background: var(--moss-bg);
  border-color: var(--moss-text);
}
.text-box--moss p {
  color: var(--moss-text);
}

.text-box--aqua { 
background: var(--aqua-bg); 
border-color: var(--aqua-text); 
}

.text-box--aqua p { 
color: var(--aqua-text); 
}

.text-box--blue { 
background: var(--blue-bg);      
border-color: var(--blue-text); 
}

.text-box--blue p { 
color: var(--blue-text); 
}

.text-box--denim {
  background: var(--denim-bg);
  border-color: var(--denim-text);
}
.text-box--denim p {
  color: var(--denim-text);
}

.text-box--lavender { 
background: var(--lavender-bg);  
border-color: var(--lavender-text); 
}

.text-box--lavender p { 
color: var(--lavender-text); 
}

.text-box--purple { 
background: var(--purple-bg);    
border-color: var(--purple-text); 
}
.text-box--purple p { 
color: var(--purple-text); 
}

.text-box--grey { 
background: var(--grey-bg); 
border-color: var(--grey-text); 
}

.text-box--grey p {
color: var(--grey-text); 
}

/* ====================
   TEXT BOX COLOR VARIANTS — THREE-COLOR SET
   Border and text are distinct here, unlike the fixed-pair
   variants above.
   ==================== */

.text-box--rust { 
background: var(--rust-bg);       
border-color: var(--rust-border); 
}

.text-box--rust p { 
color: var(--rust-text);
}

.text-box--cornflower { 
background: var(--cornflower-bg); 
border-color: var(--cornflower-border); 
}

.text-box--cornflower p { 
color: var(--cornflower-text); 
}

.text-box--olive { 
background: var(--olive-bg);      
border-color: var(--olive-border); 
}

.text-box--olive p { 
color: var(--olive-text); 
}


/* ====================
 ROUNDED IMAGE COLOR VARIANTS
Reuses the same palette tokens as .text-box, so there's
only ever one hex code per color to maintain.
   ==================== */
   
.rounded-image--maroon { 
--rounded-border-color: var(--maroon-text); 
}

.rounded-image--fuchsia { 
--rounded-border-color: var(--fuchsia-text); 
}

.rounded-image--brown { 
--rounded-border-color: var(--brown-text); 
}

.rounded-image--teal { 
--rounded-border-color: var(--teal-text); 
}

.rounded-image--green { 
--rounded-border-color: var(--green-text); 
}

.rounded-image--moss {
  --rounded-border-color: var(--moss-text);
}

.rounded-image--aqua { 
--rounded-border-color: var(--aqua-text); 
}

.rounded-image--blue { 
--rounded-border-color: var(--blue-text); 
}

.rounded-image--denim {
--rounded-border-color: var(--denim-text);
}

.rounded-image--lavender { 
--rounded-border-color: var(--lavender-text); 
}

.rounded-image--purple { 
--rounded-border-color: var(--purple-text); 
}

.rounded-image--grey { 
--rounded-border-color: var(--grey-text); 
}

.rounded-image--rust { 
border-color: var(--rust-border); 
}

.rounded-image--cornflower { 
border-color: var(--cornflower-border); 
}

.rounded-image--olive { 
border-color: var(--olive-border); 
}