:root {
    --background-color: #f8fafc;
    /* Page background */
    --surface-color: #ffffff;
    /* Cards, panels */
    --border-color: #e5e7eb;
    /* Borders */


    --color-primary: #2563eb;
    /* main brand: buttons */
    --color-primary-light: #3b82f6;
    /* active highlight */
    --color-primary-dark: #1e40af;
    /* side nav */


    --headings-color: #0f172a;
    /* Headings */
    --subtext-color: #475569;
    /* Subtext */
    --labels-color: #94a3b8;
    /* Labels */
    --text-color: #334155;
    /* Regular text */


    --success-color: #16a34a;
    /* Completed */
    --warning-color: #f59e0b;
    /* Pending */
    --danger-color: #dc2626;
    /* Overdue / Delete */


    --sidebar-bg: #1e293b;
    --sidebar-text: #cbd5f5;
    --sidebar-active: #2563eb;


    --heading-font-size: 1.5rem;
    --heading-font-weight: 600;
    --subheading-font-size: 1.25rem;
    --subheading-font-weight: 500;
    --subtext-font-size: 0.9rem;
    --subtext-font-weight: 400;
    --text-font-size: 1.15rem;
    --text-font-weight: 400;
}


html.dark {
    --background-color: #0f172a;
    /* Page background */

    --surface-color: #1e293b;
    /* Cards, panels */

    --border-color: #334155;
    /* Borders */


    --color-primary: #3b82f6;
    /* main brand: buttons */

    --color-primary-light: #60a5fa;
    /* active highlight */

    --color-primary-dark: #1d4ed8;
    /* side nav */


    --headings-color: #f1f5f9;
    /* Headings */

    --subtext-color: #cbd5f5;
    /* Subtext */

    --labels-color: #94a3b8;
    /* Labels */

    --text-color: #e2e8f0;
    /* Regular text */


    --success-color: #22c55e;
    /* Completed */

    --warning-color: #fbbf24;
    /* Pending */

    --danger-color: #ef4444;
    /* Overdue / Delete */


    --sidebar-bg: #020617;
    /* deeper than main bg for contrast */

    --sidebar-text: #cbd5f5;

    --sidebar-active: #3b82f6;


    --heading-font-size: 1.5rem;
    --heading-font-weight: 600;

    --subheading-font-size: 1.25rem;
    --subheading-font-weight: 500;

    --subtext-font-size: 0.9rem;
    --subtext-font-weight: 400;

    --text-font-size: 1.15rem;
    --text-font-weight: 400;
}

* {
    transition: background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-font-size);
    font-weight: var(--text-font-weight);
    background-color: var(--background-color);
    color: var(--text-color);
}


/* ##### sidebar styling ##### */
.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    min-height: 100vh;
    padding: 1rem;
    padding: 2rem 1.5rem;
}

.sidebar div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.logo {
    width: 18rem;
    height: auto;
}

.sidebarIcon {
    width: 2rem;
    height: 2rem;
}

.logoDiv {
    border-bottom: 2px solid color-mix(in srgb, var(--border-color), transparent 80%);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.projectsH4 {
    border-bottom: 2px solid color-mix(in srgb, var(--border-color), transparent 80%);
    padding-bottom: 2rem;
    margin-bottom: 1rem;
}

.logoutDiv {
    margin-top: 12rem;
    border-top: 2px solid color-mix(in srgb, var(--border-color), transparent 80%);
    padding-top: 1rem;
}

div a {
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: var(--heading-font-size);
    font-weight: var(--heading-font-weight);
}

div h4:hover {
    background-color: var(--sidebar-active);
    border-radius: 0.5rem;
}


/* ##### right section styling ##### */
.rightSection {
    padding: 2rem;
}

.rightSection h1 {
    font-weight: var(--heading-font-weight);
    color: var(--headings-color);
    border-bottom: 2px solid color-mix(in srgb, var(--border-color), transparent 20%);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}