/* ========================================================================== */
/*                                 [ COLORS ]                                 */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/*                            [ Root Theme Colors ]                           */
/* -------------------------------------------------------------------------- */

:root {

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

    /* 
        NOTE -----
        Default Theme Setup - ONLY ONE set of theme colors should be active!
        To use a different theme, uncomment its colors and comment out the others.
        You can also add your own custom theme by following the same format.
    */

    /* Theme 1: Default Yellow */
    /*--color-primary: #FFCD03;
    --color-soft-primary: #FFF9E7;
    --color-secondary: #000000;*/

    /* Theme 2: Green Vibes */
     --color-primary: #75C806;
    --color-soft-primary: #EDF6E5;
    --color-secondary: #2B3D2F;

    /* Theme 3: Soft Pink */
    /* --color-primary: #FF6BAA;
    --color-soft-primary: #FFEAF2;
    --color-secondary: #4B2C3C; */

    /* Theme 4: Warm Sunset */
    /* --color-primary: #FF7E5F;
    --color-soft-primary: #FFF2EB;
    --color-secondary: #3C2A21; */


    /* ===== Absolute Colors (Do Not Change) ===== */

    --color-white: #ffffff;
    --color-soft-white: #F8EEE8;
    --color-gray: #000000b3;
    --color-border-gray: #D9D9D9;
}

/* -------------------------------------------------------------------------- */
/*                      [ Utility Classes: Theme Colors ]                     */
/* -------------------------------------------------------------------------- */

/* Text Colors */
.text-primary {
    color: var(--color-primary);
}

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

.text-gray {
    color: var(--color-gray);
}

/* Background Colors */
.bg-primary {
    background-color: var(--color-primary);
}

.bg-soft-primary {
    background-color: var(--color-soft-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

/* Hover Background Colors */
.hover\:bg-primary:hover {
    background-color: var(--color-primary);
}

.hover\:bg-soft-primary:hover {
    background-color: var(--color-soft-primary);
}

/* Border Colors */
.border-primary {
    border-color: var(--color-primary);
}

.border-secondary {
    border-color: var(--color-secondary);
}

/* Placeholder Colors */
.placeholder-secondary::placeholder {
    color: var(--color-secondary);
    opacity: 1;
}

/* -------------------------------------------------------------------------- */
/*                    [ Utility Classes: Absolute Colors ]                    */
/* -------------------------------------------------------------------------- */

/* Text Colors */
.text-white {
    color: var(--color-white);
}

/* Background Colors */
.bg-white {
    background-color: var(--color-white);
}

.bg-soft-white {
    background-color: var(--color-soft-white);
}

/* Borders Colors */
.border-white {
    border-color: var(--color-white);
}

.border-gray {
    border-color: var(--color-border-gray);
}

/* Placeholders Colors */
.placeholder-white::placeholder {
    color: var(--color-white);
    opacity: 1;
}


/* ========================================================================== */
/*                              [ FONT FAMILIES ]                             */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/*                         [ Font Face Declarations ]                         */
/* -------------------------------------------------------------------------- */

@font-face {
    font-family: "Courier-New-Bold";
    src: url("../assets/fonts/Courier-New-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Courier-New-Regular";
    src: url("../assets/fonts/Courier-New-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Gotham-Bold";
    src: url("../assets/fonts/Gotham-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Gotham-Regular";
    src: url("../assets/fonts/Gotham-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Gotham-Light";
    src: url("../assets/fonts/Gotham-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Maven-Pro";
    src: url("../theme-assets/fonts/MavenPro-VariableFont_wght.ttf") format("woff2");
}

/* -------------------------------------------------------------------------- */
/*                          [ Font Utility Classes ]                          */
/* -------------------------------------------------------------------------- */

.font-heading-bold {
    font-family: "Maven-Pro", sans-serif;
    /*font-family: "Gotham-Bold", sans-serif;*/
    font-weight: bold;
}

.font-heading-regular {
    font-family: "Maven-Pro", sans-serif;
    /*font-family: "Gotham-Regular", sans-serif;*/
    font-weight: bold;
}

.font-heading-light {
    font-family: "Maven-Pro", sans-serif;
    /*font-family: "Gotham-Light", sans-serif;*/
}

.font-base-bold {
    font-family: "Maven-Pro", Courier, monospace;
    /*font-family: "Courier-New-Bold", Courier, monospace;*/
    font-weight: bold;
}

.font-base-regular {
    font-family: "Maven-Pro", Courier, monospace;
    /*font-family: "Courier-New-Regular", Courier, monospace;*/
}


/* ========================================================================== */
/*                              [ GLOBAL STYLES ]                             */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/*                  [ Alpine.js Utility: Cloaking Elements ]                  */
/* -------------------------------------------------------------------------- */

[x-cloak] {
    display: none !important;
}