/* Site Theme Colors ---------------------------------------------- */
:root { /* Site Colors are HSL values */ 
    --siteColor1: 0, 0%, 18%; /* #2d2d2d - Dark Gray */
    --siteColor2: 180, 27%, 19%; /* #15696b - Dark Teal */ 
    --siteColor3: 40, 43%, 93%; /* #4d4d4d - Dark Gray */ 
    --siteColor4: var(--gray80); /* #cccccc - Light Gray */ 
    --siteColor5: 42, 30%, 66%; /* #eab22e - Golden Yellow */ 
    --siteColor6: 180, 79%, 7%; /* #92d8da - Light Turquoise */ 
    --siteColor7: 42, 100%, 97%; 
    --siteColor8: 216, 12%, 84%; /* ICND - Darker Teal Options --siteColor: 192, 39%, 44%; /* #448a9c - Teal --siteColor: 192, 57%, 30%; /* #104f60 - Dark Teal */ 
    
    /* Other Colors */ 
    --bodyFontColor: var(--gray30); /* White / Grays / Black */ 
    --white: 0, 100%, 100%; /* #ffffff - White - overwrites Bootstrap White */ 
    --gray10: 0, 0%, 10%; /* #1a1a1a - Gray 90% Black - */ 
    --gray20: 0, 0%, 20%; /* #333333 - Gray 80% Black - */ 
    --gray30: 0, 0%, 30%; /* #4d4d4d - Gray 70% Black - */ 
    --gray40: 0, 0%, 40%; /* #666666 - Gray 60% Black - */ 
    --gray50: 0, 0%, 50%; /* #808080 - Gray 50% Black - */ 
    --gray60: 0, 0%, 60%; /* #999999 - Gray 40% Black - */ 
    --gray70: 0, 0%, 70%; /* #b3b3b3 - Gray 30% Black - */ 
    --gray80: 0, 0%, 80%; /* #cccccc - Gray 20% Black - */ 
    --gray90: 0, 0%, 90%; /* #e6e6e6 - Gray 10% Black - */ 
    --lightGray: var(--gray80); /* #cccccc - Light Gray - */ 
    --gray: var(--gray50); /* #808080 - Gray - */ 
    --darkGray: var(--gray20); /* #333333 - Dark Gray - */ 
    --black: var(--siteColor1); /* Site Color 1 - overwrites Bootstrap Black */ 
    --trueRed: 0, 100%, 50%; /* #FF0000 - True Red */ 
    --googleBlue: 216, 92%, 65%; /* #5595F8 - Google Blue */ 
    --pulseColor: var(--siteColor1); /* Site Color 1 Default */ 
    --placeholderBG: hsla(var(--black), 5%); 
    --sds-color-text-brand-default: hsla(0, 0%, 17%, 1);
    /* ── Extra Colors ────────────────────────────────────────────────────── */
    --creamBG: #FFFBF2;                       /* Cream off-white background */
    --warmBG: #F6F2EB;                        /* Warm beige section background */
    --darkText: #474747;                      /* Dark gray headings */
    --darkBase: #2c2c2c;                      /* Near-black text */
    --charcoal: #363636;                      /* Charcoal text */
    --textPrimary: rgba(45, 45, 45, 0.8);    /* Primary body text */
    --textSecondary: rgba(45, 45, 45, 0.77); /* Secondary body text */
    --textMuted: rgba(45, 45, 45, 0.35);     /* Muted / disabled text */
    --warmOverlay: rgba(76, 40, 18, 0.2);    /* Warm brown overlay */
}
/* Site Theme Color Classes */
.site-color-1, .site-color-1-hover:hover { color: hsl(var(--siteColor1)) !important; }
.site-color-1-bg, .site-color-1-bg-hover:hover { background-color: hsl(var(--siteColor1)) !important; }
.site-color-2, .site-color-2-hover:hover { color: hsl(var(--siteColor2)) !important; }
.site-color-2-bg, .site-color-2-bg-hover:hover { background-color: hsl(var(--siteColor2)) !important; }
.site-color-3, .site-color-3-hover:hover { color: hsl(var(--siteColor3)) !important; }
.site-color-3-bg, .site-color-3-bg-hover:hover { background-color: hsl(var(--siteColor3)) !important; }
.site-color-4, .site-color-4-hover:hover { color: hsl(var(--siteColor4)) !important; }
.site-color-4-bg, .site-color-4-bg-hover:hover { background-color: hsl(var(--siteColor4)) !important; }
.site-color-5, .site-color-5-hover:hover { color: hsl(var(--siteColor5)) !important; }
.site-color-5-bg, .site-color-5-bg-hover:hover { background-color: hsl(var(--siteColor5)) !important; }
.site-color-6, .site-color-6-hover:hover { color: hsl(var(--siteColor6)) !important; }
.site-color-6-bg, .site-color-6-bg-hover:hover { background-color: hsl(var(--siteColor6)) !important; }
/* Other Color Classes */
.body-font-color, .body-font-color:hover { color: hsl(var(--bodyFontColor)) !important; }
.white, .white-hover:hover { color: hsl(var(--white)) !important; }
.white-bg, .white-bg-hover:hover { background-color: hsl(var(--white)) !important; }
.black, .black-hover:hover { color: hsl(var(--black)) !important; }
.black-bg, .black-bg-hover:hover { background-color: hsl(var(--black)) !important; }
.true-red, .true-red-hover:hover { color: hsl(var(--trueRed)) !important; }
.true-red-bg, .true-red-bg-hover:hover { background-color: hsl(var(--trueRed)) !important; }
.google-blue, .google-blue-hover:hover { color: hsl(var(--googleBlue)) !important; }
.google-blue-bg, .google-blue-bg-hover:hover { background-color: hsl(var(--googleBlue)) !important; }