/*
==============================
Variables - Base (non-palette)
==============================
*/

:root {
    --white: #ffffff;
    --black: #111111;
    --black-muted: #555555;
    --black-faint: #b9b9b9;
    --grey: #f5f5f5;
    --grey-alt: #efefef;
    --grey-border: #e0e0e0;
    --error: #e53935;
    --alert: #F49830;
    --overlay: rgba( 0,0,0, 0.5);
}


/*
==============================
Variables - Blueberry Palette
==============================
*/

.palette-blueberry {
    --color-primary: #004E89;
    --color-primary-hover: #003d6b;
    --color-secondary: #3580B9;
    --color-secondary-hover: #2a6a9a;
    --color-accent: #F7C59F;
    --color-accent-hover: #f4b07a;
    --color-bg: #ECF2F9;
    --color-bg-alt: #ffffff;
    --color-dark-surface: #0F2F4A;
    --color-dark-border: #0a2035;
    --color-dark-surface-alt: #0a2035;
    --color-bg-header: #f6d5bb;
}


/*
==============================
Variables - Class Palette
==============================
*/

.palette-class {
    --color-primary: #E2BA36;
    --color-primary-hover: #c9a52e;
    --color-secondary: #8F8782;
    --color-secondary-hover: #7a7370;
    --color-accent: #D6C795;
    --color-accent-hover: #c9b87a;
    --color-bg: #F2EFE2;
    --color-bg-alt: #ffffff;
    --color-dark-surface: #0A100D;
    --color-dark-border: #060c09;
    --color-dark-surface-alt: #060c09;
    --color-bg-header: #eee2be;
}


/*
==============================
Variables - Mint Palette
==============================
*/

.palette-mint {
    --color-primary: #77BFA3;
    --color-primary-hover: #5daa8c;
    --color-secondary: #98C9A3;
    --color-secondary-hover: #7db88a;
    --color-accent: #BFD8BD;
    --color-accent-hover: #a8c9a6;
    --color-bg: #F8F9EE;
    --color-bg-alt: #ffffff;
    --color-dark-surface: #2F5E55;
    --color-dark-border: #234a43;
    --color-dark-surface-alt: #234a43;
    --color-bg-header: #d1e7d0;
}


/*
==============================
Colors
==============================
*/

.color-primary {
    color: var(--color-primary);
}
.color-secondary {
    color: var(--color-secondary);
}
.color-accent {
    color: var(--color-accent);
}
.color-white {
    color: var(--white) !important;
}
.color-black {
    color: var(--black);
}
.color-black-muted {
    color: var(--black-muted);
}
.color-black-faint {
    color: var(--black-faint);
}
.color-grey {
    color: var(--grey);
}
.color-error {
    color: var(--error);
}
.color-alert {
    color: var(--alert);
}


/*
==============================
Background Colors
==============================
*/

.bg-primary {
    background-color: var(--color-primary);
}
.bg-secondary {
    background-color: var(--color-secondary);
}
.bg-accent {
    background-color: var(--color-accent);
}
.bg-dark-surface {
    background-color: var(--color-dark-surface) !important;
}
.bg-dark-surface-alt {
    background-color: var(--color-dark-surface-alt) !important;
}
.bg-bg {
    background-color: var(--color-bg);
}
.bg-bg-alt {
    background-color: var(--color-bg-alt);
}
.bg-white {
    background-color: var(--white);
}
.bg-grey {
    background-color: var(--grey);
}
.bg-grey-alt {
    background-color: var(--grey-alt) !important;
}
.bg-transp-white {
    background-color: rgba(255, 255, 255, 0.08);
}
.bg-hero {
    background-color: var(--color-dark-surface);
}


/*
==============================
Border Colors
==============================
*/

.border-primary {
    border-color: var(--color-primary);
}
.border-secondary {
    border-color: var(--color-secondary);
}
.border-accent {
    border-color: var(--color-accent);
}
.border-dark-surface {
    border-color: var(--color-dark-surface);
}
.border-dark {
    border-color: var(--color-dark-border);
}
.border-grey {
    border-color: var(--grey-border);
}
.border-grey-alt {
    border-color: var(--grey-alt);
}
.border-white {
    border-color: var(--white);
}