:root {
    --base--light: #FAF7F6;
    --base-rgb--light: 250, 247, 246;
    --base-tint--light: #FFFFFF;
    --base-shade--light: #e0dddb;
    --base-opp--light: #161616;
    --accent--light: #02735E;
    --accent-rgb--light: 159, 139, 231;
    --additional--light: #DDF160;
    --additional-rgb--light: 221, 241, 96;
    --base--dark: #161616;
    --base-rgb--dark: 22, 22, 22;
    --base-tint--dark: #1C1C1C;
    --base-shade--dark: #0a0a0a;
    --base-opp--dark: #FAF7F6;
    --accent--dark: #02735E;
    --accent-rgb--dark: 221, 241, 96;
    --additional--dark: #02735E;
    --additional-rgb--dark: 159, 139, 231;
    --t-bright--light: #161616;
    --t-medium--light: #303030;
    --t-muted--light: #585858;
    --t-muted-extra--light: #B2AEAD;
    --t-bright--dark: #FFFFFF;
    --t-medium--dark: #F5F5F5;
    --t-muted--dark: #838383;
    --t-muted-extra--dark: #535151;
    --neutral-transparent--light: rgba(255, 255, 255, 0.3);
    --neutral-transparent--dark: rgba(0, 0, 0, 0.3);
}

/* Utility Classes for Theme Colors */
.bg-primary { background-color: var(--accent--light, #9F8BE7) !important; }
.bg-primary-dark { background-color: var(--accent--dark, #DDF160) !important; }
.bg-secondary { background-color: var(--additional--light, #DDF160) !important; }
.bg-secondary-dark { background-color: var(--additional--dark, #9F8BE7) !important; }
.bg-base-light { background-color: var(--base--light, #FAF7F6) !important; }
.bg-base-dark { background-color: var(--base--dark, #161616) !important; }

.text-primary { color: var(--accent--light, #9F8BE7) !important; }
.text-primary-dark { color: var(--accent--dark, #DDF160) !important; }
.text-secondary { color: var(--additional--light, #DDF160) !important; }
.text-secondary-dark { color: var(--additional--dark, #9F8BE7) !important; }
.text-bright-light { color: var(--t-bright--light, #161616) !important; }
.text-bright-dark { color: var(--t-bright--dark, #FFFFFF) !important; }

.border-primary { border-color: var(--accent--light, #9F8BE7) !important; }
.border-primary-dark { border-color: var(--accent--dark, #DDF160) !important; }
.border-secondary { border-color: var(--additional--light, #DDF160) !important; }
.border-secondary-dark { border-color: var(--additional--dark, #9F8BE7) !important; }

/* Fix for service accordion content overflow */
.service-accordion__item.active .service-accordion__content {
    max-height: none !important;
}

/* Ensure headings are fully visible in both themes */
.service-accordion__heading .t-medium,
.service-categories h4.t-medium,
.service-accordion__header .t-medium,
h4.t-medium.t-bright {
    font-weight: 600;
}

body.dark-mode .service-accordion__heading .t-medium,
body.dark-mode .service-categories h4.t-medium,
body.dark-mode .service-accordion__header .t-medium,
body.dark-mode h4.t-medium.t-bright,
body.dark-mode h4.t-medium {
    color: var(--t-bright--dark) !important;
}

/* Fix description text color - always use high contrast */
.service-accordion__description,
.service-accordion__description p,
.service-accordion__description p.t-bright,
.service-accordion__description p.t-large,
.service-accordion__description h1,
.service-accordion__description h2,
.service-accordion__description h3,
.service-accordion__description h4,
.service-accordion__description h5,
.service-accordion__description h6,
.service-accordion__description li,
.service-accordion__description span,
.service-accordion__description div {
    color: var(--t-bright--light) !important;
}

body.dark-mode .service-accordion__description,
body.dark-mode .service-accordion__description p,
body.dark-mode .service-accordion__description p.t-bright,
body.dark-mode .service-accordion__description p.t-large,
body.dark-mode .service-accordion__description h1,
body.dark-mode .service-accordion__description h2,
body.dark-mode .service-accordion__description h3,
body.dark-mode .service-accordion__description h4,
body.dark-mode .service-accordion__description h5,
body.dark-mode .service-accordion__description h6,
body.dark-mode .service-accordion__description li,
body.dark-mode .service-accordion__description span,
body.dark-mode .service-accordion__description div {
    color: var(--t-bright--dark) !important;
}

/* Ensure links keep their accent color */
.service-accordion__description a {
    color: var(--accent--light) !important;
}

body.dark-mode .service-accordion__description a {
    color: var(--accent--dark) !important;
}