:root {
    /* Primary Colors */
    --primary-color: #0071E3;          /* Muted Teal */
    --bs-primary: #0071E3;  
    --primary-hover-color: #2D917F;    /* Darker teal for hover */
    --primary-active-color: #247768;   /* Even darker for active states */
    --primary-disabled-color: #A0D6C7; /* Light teal for disabled states */
    --primary-light-color: #A0D6C7;    /* Lighter version of primary for backgrounds or highlights */
    
    /* Secondary Colors */
    --secondary-color: #39ACAC;        /* Cool Cyan */
    --secondary-hover-color: #2D9191;  /* Darker cyan for hover */
    --secondary-active-color: #247676; /* Darker cyan for active */
    --secondary-disabled-color: #A0D6D6; /* Light cyan for disabled states */
    --secondary-light-color: #A0D6D6;  /* Lighter version of secondary */
    
    /* Primary Font */ 
    --primary-font-color: #000C02;

    /* Status Colors */
    --success-color: #198754;          /* Standard Success Green */
    --success-hover-color: #218838;    /* Darker green for hover */
    --success-active-color: #1e7e34;   /* Even darker green for active */
    --success-disabled-color: #98E19B; /* Light green for disabled */

    --danger-color: #BB2D3B;           /* Complementary Muted Red */
    --danger-hover-color: #922F3E;     /* Darker red for hover */
    --danger-active-color: #7A2433;    /* Even darker red for active */
    --danger-disabled-color: #ECA0A8;  /* Light red for disabled */

    --warning-color: #ffc107;          /* Standard Warning Yellow */
    --warning-hover-color: #e0a800;    /* Darker yellow for hover */
    --warning-active-color: #d39e00;   /* Even darker yellow for active */
    --warning-disabled-color: #FFE484; /* Light yellow for disabled */

    --info-color: #39AC79;             /* Harmonious Green */
    --info-hover-color: #2D9163;       /* Darker green for hover */
    --info-active-color: #247758;      /* Even darker green for active */
    --info-disabled-color: #A0D6B0;    /* Light harmonious green for disabled */

    /* Neutral Colors */
    --light-color: #F4F4F4;            /* Light Gray for backgrounds */
    --light-hover-color: #E6E6E6;      /* Slightly darker gray for hover */
    --light-disabled-color: #F9F9F9;   /* Very light gray for disabled states */

    --dark-color: #333333;             /* Dark Gray/Black for text */
    --dark-hover-color: #1C1C1C;       /* Darker gray for hover */
    --dark-disabled-color: #CCCCCC;    /* Medium gray for disabled states */

    /* Accent Colors */
    --accent-color: #FF5733;           /* Bright Orange Accent */
    --accent-hover-color: #E74C3C;     /* Darker accent color on hover */
    --accent-active-color: #C0392B;    /* Even darker for active states */
    --accent-disabled-color: #FFAD99;  /* Light accent color for disabled */

    /* Border & Outline Colors */
    --border-color: #CCCCCC;           /* Light gray for borders */
    --border-hover-color: #BBBBBB;     /* Slightly darker gray for border hover */
    --border-active-color: #999999;    /* Darker gray for active border */
    --border-disabled-color: #E0E0E0;  /* Light gray for disabled border */
    
    /* Background Colors */
    --background-color: #FFFFFF;       /* White background */
    --background-alt-color: #F2F2F6;   /* Slightly off-white background */
    --background-hover-color: #F0F0F0; /* Light gray for hover on backgrounds */
    --background-disabled-color: #FAFAFA; /* Very light gray for disabled backgrounds */

    /* Navigation Bar */
    --nav-background-color: #FFFFFF;       /* White background */
    --nav-border-color: #E0E0E0;  /* Light gray for disabled border */
    --nav-link-color: #8E8E93;

    /* Text Colors */
    --text-primary-color: #333333;     /* Dark text for primary */
    --text-secondary-color: #6c757d;   /* Lighter gray for secondary text */
    --text-disabled-color: #A1A1A1;    /* Disabled text color */
    
    /* Highlight & Selection Colors */
    --highlight-color: #FFDD57;        /* Yellow highlight color */
    --highlight-hover-color: #FFD93B;  /* Darker highlight on hover */
    --highlight-active-color: #FFC107; /* Active highlight color */
}