:root {
    --color-primary: #00e6ff; /* Cyan Primary */
    --color-secondary: #00a3b4; /* Dark Cyan Secondary */
    --color-tertiary: #ffbf1e; /* Gold Tertiary */
    --color-accent: #8460ef; /* Purple Accent */
    --color-background: #080808; /* Background color */
    --color-text: #ffffff; /* Text color */

    /* Roadmap Widget Colors */
    /* HSBA FORMAT: 80% saturation, 40% brightness, 20% alpha; BORDERS: 75% alpha */
    --color-completed: rgba(20, 102, 94, 0.2);
    --color-completed-border: rgba(20, 102, 94, 0.75);
    --color-in-progress: rgba(102, 80, 20, 0.2);
    --color-in-progress-border: rgba(102, 80, 20, 0.75);
    --color-on-hold: rgba(102, 39, 20, 0.2);
    --color-on-hold-border: rgba(102, 39, 20, 0.75);
    --color-next-priority: rgba(90, 20, 102, 0.2);
    --color-next-priority-border: rgba(90, 20, 102, 0.75);
    --color-todo: rgba(20, 52, 102, 0.2);
    --color-todo-border: rgba(20, 52, 102, 0.75);
    --color-live: rgba(20, 102, 41, 0.2);
    --color-live-border: rgba(20, 102, 41, 0.75);
    --color-shelved: rgba(98, 99, 115, 0.2);
    --color-shelved-border: rgba(98, 99, 115, 0.75);

    /* Priority Colors */
    --priority-1: rgb(31, 102, 20);
    --priority-2: rgb(97, 102, 20);
    --priority-3: rgb(102, 64, 20);
    --priority-4: rgb(102, 23, 20);
    --priority-5: rgb(102, 20, 76);

    /* Additional Colors */
    --darker-gray: #0f0e15;
    --gray: #13161a;
    --lighter-gray: #3b4046;
    --cyan-500: #00a3b4;
    --cyan-300: #00bfd9;

    /* New Colors */
    --color-hover: var(--lighter-gray); /* Lighter gray for hover effects */
    --color-border: var(--cyan-300); /* Cyan-300 for borders */
    --color-highlight: var(--color-tertiary); /* Gold tertiary for highlights */
}