:root {
    /* Color palette */
    --color-primary: #005C2A;   /* Moss green */
    --color-primary-alt: #4d6b53; /* lighter shade of primary */
    --color-secondary: #7F5C88; /* Heather purple */
    --color-secondary-alt: #A484AC; /* lighter shade of secondary */
    --color-tertiary: #004b84;  /* Sea blue (currently same as tertiary) */
    --color-teritary-alt: #405866; /* lighter shade of tertiary */
    --color-bg: #F8F7F2;        /* Light background */
    --color-text: #333;         /* Default text */
}

body {
    background-color: var(--color-bg);
    font-family: 'Ubuntu', sans-serif;
    color: var(--color-text);
}

/* Text colour */
.text-primary {
    color: var(--color-primary) !important;
}
.text-secondary {
    color: var(--color-secondary) !important;
}

/* Hyperlink hover color for text-primary and text-secondary */
.text-primary a:hover,
a.text-primary:hover {
    color: var(--color-primary-alt) !important;
}

.text-secondary a:hover,
a.text-secondary:hover {
    color: var(--color-secondary-alt) !important;
}

/* Custom button styles that extend Bootstrap */
/* Primary button */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}
.btn-primary:hover {
    background-color: var(--color-primary-alt);
    border-color: var(--color-primary-alt);
    color: var(--color-bg);
}
.btn-primary:active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

/* Secondary button */
.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-bg);
}
.btn-secondary:hover {
    background-color: var(--color-secondary-alt);
    border-color: var(--color-secondary-alt);
    color: var(--color-bg);
}

/* Tertiary button */
.btn-tertiary {
    background-color: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: var(--color-bg);
}
.btn-tertiary:hover {
    background-color: var(--color-teritary-alt);
    border-color: var(--color-teritary-alt);
    color: var(--color-bg);
}

/* Outline button */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--color-tertiary);
    color: var(--color-tertiary);
}
.btn-outline-primary:hover {
    background-color: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: var(--color-bg);
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.btn-outline-secondary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-bg);
}
.btn-outline-tertiary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline-tertiary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

/* Disabled button */
.btn-disabled {
    background-color: var(--color-primary-alt);
    border-color: var(--color-primary-alt);
    color: var(--color-bg);
    cursor: not-allowed;
    opacity: 0.65;
    pointer-events: none;
}

/* Header and footer styles */
.navbar {
    background-color: var(--color-primary-alt) !important;
}

.navbar .navbar-nav .nav-link {
    color: var(--color-tertiary) !important;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}


.navbar .navbar-nav .nav-link:hover {
    color: var(--color-teritary-alt) !important;
    text-decoration: underline;
}

/* Alert boxes */
.alert-secondary-custom {
    background-color: var(--color-secondary-alt) !important;
    color: var(--color-bg) !important;
    border-color: var(--color-secondary) !important;
}