:root {
    /* ✅ Global Brand Colors */
    --bs-primary: #3A5A40;  /* 🌿 Deep Forest Green – Unifying brand color, natural and grounding */
    --bs-secondary: #B3A19B;  /* 🏛️ Soft Neutral Beige – Versatile, balances category colors */
    --bs-success: #5C846A;  /* 🌲 Muted Deep Green – Stable and balanced */
    --bs-info: #BFAEA6;  /* 📖 Warm Grey-Beige – Subtle and informative */
    --bs-warning: #D4A373;  /* 🌟 Soft Golden Sand – Optimistic and warm */
    --bs-danger: #B04F4F;  /* 🚨 Muted Deep Red – Strong and attention-grabbing */
    --bs-light: #ECECEC;  /* ☁️ Soft Neutral – Clean and calming background */
    --bs-dark: #2D2D2D;  /* 🖤 Deep Charcoal – High-contrast text color */

    --bs-primary-hover: #2F4633;  /* 🌿 Darker Forest Green – Slightly deeper for a smooth hover transition */
    --bs-secondary-hover: #9E7B73;  /* 🏛️ Warm Taupe – Slightly darker than secondary for contrast */

    /* ✅ Category Colors */
    --bs-conflict: #E76F51;  /* 🔥 Warm Rust Orange – Bold and attention-grabbing */
    --bs-love: #D6A85E;  /* 💛 Golden Amber – Warm and inviting */
    --bs-social: #6D6875;  /* 💜 Muted Lavender – Soft and balanced */
    --bs-finance: #468FAF;  /* 💙 Soft Teal Blue – Cool and stable */
    --bs-parenting: #9C6644;  /* 🟤 Rich Earth Brown – Warm and grounding */
    --bs-emotional: #8AB17D;  /* 🌱 Gentle Moss Green – Calm and reassuring */
    --bs-intimacy: #A75D6A;  /* ❤️ Deep Rosewood – Warm and passionate */
    --bs-perspective: #FF914D;  /* 🍊 Bold Tangerine – Bright, energetic, and distinct */
    --bs-trust: #2C7FB8;  /* 🔵 Slightly deeper, vibrant blue  */
    --bs-test: #1778D8;  /* 🔵 Slightly deeper, vibrant blue  */
    --bs-test-long: #4978a7;  /* 🔵 Slightly deeper, vibrant blue  */

    /* ✅ Light Variants (for Headers & Highlights) */
    --bs-conflict-light: #fab8a0; /*#F3A284;*/  /* 🍑 Soft Peach – Lighter, inviting shade */
    --bs-love-light: #ddb991;  /* 🌟 Light Warm Beige – Soft and subtle */
    --bs-social-light: #cabadd;  /* 🎭 Soft Mauve – Muted and elegant */
    --bs-finance-light: #b9d7e2;  /* 🏦 Light Sky Teal – Crisp and refreshing */
    --bs-parenting-light: #C69D7D;  /* 🧡 Warm Sandstone – Soft and comforting */
    --bs-emotional-light: #B3D1A9;  /* 🍃 Soft Mint Green – Gentle and soothing */
    --bs-intimacy-light: #dbb0b7;  /* 🌸 Blush Pink – Delicate and warm */
    --bs-perspective-light: #fcdac3;  /* 🍑 Soft Apricot – A warm, inviting contrast */
    --bs-trust-light: #A3D5F7;  /* 🔵 Slightly deeper, vibrant blue  */
    --bs-test-light: #7dc2ff;  /* 🔹 Soft sky blue  */
    --bs-test-long-light: #cee8ff;  /* 🔹 Soft sky blue  */
    
    /* Text and Background */
    --bs-body-bg: var(--bs-light);
    --bs-body-color: var(--bs-dark);
    --text-color: var(--bs-dark);

    /* alt pallete */
    --primary-color: #184C45; /* Dark Green */
    --secondary-color: #F5F0EB; /* Warm Cream */
    --accent-color-1: #F28E7B; /* Soft Coral */
    --accent-color-2: #4C9F70; /* Muted Teal */
    --loud-color: #99FF99;
}



/* Category-Specific Themes -- apply to body */
.theme-perspective {
    --bs-theme-dark: var(--bs-perspective);
    --bs-secondary: var(--bs-perspective-light);
}

.theme-love {
    --bs-theme-dark: var(--bs-love);
    --bs-secondary: var(--bs-love-light);
}

.theme-trust {
    --bs-theme-dark: var(--bs-trust);
    --bs-secondary: var(--bs-trust-light);
}

.theme-social {
    --bs-theme-dark: var(--bs-social);
    --bs-secondary: var(--bs-social-light);
}

.theme-conflict {
    --bs-theme-dark: var(--bs-conflict);
    --bs-secondary: var(--bs-conflict-light);
}

.theme-finance {
    --bs-theme-dark: var(--bs-finance);
    --bs-secondary: var(--bs-finance-light);
}

.theme-parenting {
    --bs-theme-dark: var(--bs-parenting);
    --bs-secondary: var(--bs-parenting-light);
}

.theme-emotional {
    --bs-theme-dark: var(--bs-emotional);
    --bs-secondary: var(--bs-emotional-light);
}

.theme-intimacy {
    --bs-theme-dark: var(--bs-intimacy);
    --bs-secondary: var(--bs-intimacy-light);
}

.theme-test {
    --bs-theme-dark: var(--bs-test);
    --bs-secondary: var(--bs-test-light);
}

.theme-test-long {
    --bs-theme-dark: var(--bs-test);
    --bs-secondary: var(--bs-test-light);
}



/* ✅ Background Colors */
.bg-theme-dark{
    background-color: var(--bs-theme-dark) !important;    
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
}

.bg-info {
    background-color: var(--bs-info) !important;
}

.bg-warning {
    background-color: var(--bs-warning) !important;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
}

.bg-light {
    background-color: var(--bs-light) !important;
}

.bg-dark {
    background-color: var(--bs-dark) !important;
}



/* ✅ Text Colors */
.text-primary {
    color: var(--bs-primary) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}

.text-success {
    color: var(--bs-success) !important;
}

.text-info {
    color: var(--bs-info) !important;
}

.text-warning {
    color: var(--bs-warning) !important;
}

.text-danger {
    color: var(--bs-danger) !important;
}

.text-light {
    color: var(--bs-light) !important;
}

.text-dark {
    color: var(--bs-dark) !important;
}



/* ✅ Button Colors */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
}
.btn-primary:hover {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
}

.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.btn-outline-primary:hover {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
    color: var(--bs-light) !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-dark) !important;
}
.btn-secondary:hover {
    background-color: var(--bs-secondary-hover) !important;
    border-color: var(--bs-secondary-hover) !important;
}

.btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--bs-secondary-hover) !important;
    border-color: var(--bs-secondary-hover) !important;
    color: var(--bs-light) !important;
}



/* ✅ Borders */
.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

.border-info {
    border-color: var(--bs-info) !important;
}

.border-warning {
    border-color: var(--bs-warning) !important;
}

.border-danger {
    border-color: var(--bs-danger) !important;
}

.border-light {
    border-color: var(--bs-light) !important;
}

.border-dark {
    border-color: var(--bs-dark) !important;
}