/* Color library */
:root {
    /* Greys */
    --color-grey-light: #2c2c2e;
    --color-grey: #1c1c1e;
    --color-grey-dark: #121214;
    /* Whites */
    --color-text-white: #f5f5f7;
    --color-white-dim: #e5e5ea;
    /* Button colors */
    --color-btn-primary-background: #8C320F;
    --color-btn-primary-background-app: #DBBC93;
    --color-btn-secondary-background-app: #adb5bd;
    --color-btn-tertriary-app: #231B10;
    /* Call-to-action Green */
    --color-cta-green: #2ecc40;
    --color-cta-green-dark: #229a2e;
    --color-cta-green-light: #4ff77f;
    /* Accent Colors */
    --color-accent-orange: #ff9500;
    --color-accent-pink: #ff2d55;
    --color-accent-blue: #0a84ff;
    --color-accent-purple: #bf5af2;
    /* Backgrounds */
    --color-bg-public: #000404;
    --color-bg-main: #18181a;
    --color-bg-card: #232326;
    --color-bg-card-app: #120B04;
    --color-bg-overlay: #222226;
    /* Borders */
    --color-border: #3a3a3c;
    --color-border-light: #48484a;
    /* Error/Warning/Success */
    --color-error: #ff453a;
    --color-warning: #ffd60a;
    --color-success: #30d158;
    /* Cocktail Theme Extras */
    --color-cocktail-red: #c44569;
    --color-cocktail-yellow: #f7b731;
    --color-cocktail-mint: #00b894;
    --color-cocktail-berry: #6c3483;
    /* Danger Button Colors */
    --color-danger: #c41e3a;
    --color-danger-dark: #a01a30;
    /* Text color headings */
    --color-text-soft-white: #DBBC93;
    --color-text-white: #FBE9C2;
    --color-text-black: #121214;
}

/* Shared styles */

main {
    min-height: 100vh;
}

body, p {
    font-family: 'Lato', Arial, sans-serif;
    color: var(--color-text-soft-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: var(--color-text-white);
}

h1 {
    font-size: 2.3rem;
}

.bg-dark-shared {
    background-color: var(--color-bg-public);
}

.text-color-heading {
    color: var(--color-text-white);
}

.text-color-body {
    color: var(--color-text-soft-white);
}

.brand-font {
    font-family: 'Inter';
    font-weight: 200;
}

.form-control:focus {
    border-color: var(--color-text-soft-white) !important;
    box-shadow: 0 0 0 0.2rem rgba(181, 140, 90, 0.35), 0 4px 24px rgba(181, 140, 90, 0.45) !important;
}

.form-select:focus {
    border-color: var(--color-text-soft-white) !important;
    box-shadow: 0 0 0 0.2rem rgba(181, 140, 90, 0.35), 0 4px 24px rgba(181, 140, 90, 0.45) !important;
}