/* Help from https://websitestylekit.com/ */

:root {
    --color-bg-primary: #f7eed9;         /* Main background colour */
    --color-bg-primary-alt: #F5E2B0;     /* Headers, footers, sidebars */

    --color-primary: #19A876; /* Buttons, icons, details */
    --color-primary-alt: #14875F; /* Links, CTAs, hovers */

    --color-secondary: #329CFF; /* Secondary buttons, icons, details */
    --color-secondary-alt: #0C8AFF; /* Secondary links, CTAs, hovers */

    --color-tertiary: #FF674C; /* Tertiary buttons, icons, details */
    --color-tertiary-alt: #FF4726; /* Tertiary links */
    --color-text-primary: #17362B; /* Primary text colour */
    --color-text-secondary: #362D17; /* Secondary text colour */
}

/* Override Bootstrap button colors only */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary-alt) !important;
    color: white !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--color-primary-alt) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

.btn-outline-primary {
    background-color: white !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

.btn-secondary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary-alt) !important;
    color: white !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: var(--color-secondary-alt) !important;
    border-color: var(--color-secondary) !important;
    color: white !important;
}

.btn-outline-secondary {
    background-color: white !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-secondary) !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: white !important;
}

.btn-tertiary {
    background-color: var(--color-tertiary) !important;
    border-color: var(--color-tertiary-alt) !important;
    color: white !important;
}

.btn-tertiary:hover, .btn-tertiary:focus, .btn-tertiary:active {
    background-color: var(--color-tertiary-alt) !important;
    border-color: var(--color-tertiary) !important;
    color: white !important;
}

.btn-outline-tertiary {
    background-color: white !important;
    border-color: var(--color-tertiary) !important;
    color: var(--color-tertiary) !important;
}

.btn-outline-tertiary:hover, .btn-outline-tertiary:focus, .btn-outline-tertiary:active {
    background-color: var(--color-tertiary) !important;
    border-color: var(--color-tertiary) !important;
    color: white !important;
}


/* Custom background colors */
body {
    background-color: var(--color-bg-primary);
}

.header, .footer {
    background-color: var(--color-bg-primary-alt);
}

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

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