/* Variables */
:root {
    /* General */
    --border-radius: 24px;
    --gutter-x: 1rem;
    --gutter-y: 1rem;
    --link-text-color: #26314d;
    --shadow-color: rgba(73, 64, 101, 0.14);
    --whitespace-color: #fff;
    --image-whitespace-color: #ffffff;
    --site-background-color: #ffffff;
    --sidebar-width: 300px;
    --light-bg: #fff3e6;
    --soft-pink: #ffe4ee;
    --soft-blue: #dff4ff;
    --soft-mint: #e4fbf4;
    --soft-yellow: #fff1bd;
    --accent-pink: #ff7aa2;
    --accent-blue: #69c8ff;
    --accent-mint: #65d6c0;
    --accent-yellow: #ffc857;
    --accent-coral: #ff8d72;
    /* Important Notice */
    --important-notice-background-color: #3a0e2e;
    --important-notice-text-color: #fff;
    --header-background-color: #ffffff;
    --header-text-color: var(--default-text-color);
    /* Cookie Notice */
    --cookie-notice-background-color: rgba(38, 49, 77, 0.9);
    --cookie-notice-text-color: #fff;
    /* Navigation */
    --navigation-background-color: #fff;
    --navigation-background-color-hover: #fff3e6;
    --navigation-background-color-active: #ffe4ee;
    --navigation-text-color: #26314d;
    --navigation-text-color-hover: #ff6f9b;
    --navigation-text-color-active: #26314d;
    /* Offcanvas */
    --offcanvas-background-color: #fff8f1;
    --offcanvas-text-color: var(--navigation-text-color);
    /* Defaults */
    --default-background-color: #fff3e6;
    --default-border-color: rgba(38, 49, 77, 0.1);
    --default-line-height: 1.55;
    --default-text-font: "Google Sans", sans-serif;
    --default-text-color: #26314d;
    --default-text-size: 15px;
    /* Buttons */
    --default-button-background-color: #fff;
    --default-button-background-color-hover: #fff3e6;
    --default-button-background-color-active: #ffe4ee;
    --default-button-border-color: rgba(38, 49, 77, 0.08);
    --default-button-text-color: #26314d;
    --primary-button-background-color: linear-gradient(
        135deg,
        #ff7aa2 0%,
        #ff8d72 100%
    );
    --primary-button-background-color-hover: linear-gradient(
        135deg,
        #ff6f9b 0%,
        #ff7e62 100%
    );
    --primary-button-background-color-active: #ff6f9b;
    --primary-button-border-color: rgba(255, 122, 162, 0.25);
    --primary-button-text-color: #fff;
    --outline-button-background-color: #fff;
    --outline-button-text-color: #26314d;
    --success-button-background-color: linear-gradient(
        135deg,
        #65d6c0 0%,
        #69c8ff 100%
    );
    --success-button-background-color-hover: linear-gradient(
        135deg,
        #58cbb4 0%,
        #5cbdf4 100%
    );
    --success-button-background-color-active: #58cbb4;
    --success-button-border-color: rgba(101, 214, 192, 0.25);
    --success-button-text-color: #26314d;
    --warning-button-background-color: #ffc857;
    --warning-button-background-color-hover: #ffd777;
    --warning-button-background-color-active: #efb93f;
    --warning-button-border-color: rgba(255, 200, 87, 0.35);
    --warning-button-text-color: #5f4200;
    --danger-button-background-color: #ff6b6b;
    --danger-button-background-color-hover: #ff8585;
    --danger-button-background-color-active: #ef5c5c;
    --danger-button-border-color: rgba(255, 107, 107, 0.25);
    --danger-button-text-color: #fff;
    /* Notices */
    --default-notice-background-color: #fff3e6;
    --default-notice-text-color: #26314d;
    --default-notice-border-color: rgba(38, 49, 77, 0.1);
    --primary-notice-background-color: #dff4ff;
    --primary-notice-text-color: #26314d;
    --primary-notice-border-color: #bfe9ff;
    --success-notice-background-color: #e4fbf4;
    --success-notice-text-color: #146451;
    --success-notice-border-color: #b9f0e1;
    --warning-notice-background-color: #fff1bd;
    --warning-notice-text-color: #7a5200;
    --warning-notice-border-color: #ffe28b;
    --danger-notice-background-color: #ffe0e0;
    --danger-notice-text-color: #9d2828;
    --danger-notice-border-color: #ffc4c4;
    /* Breadcrumbs */
    --breadcrumbs-background-color: transparent;
    --breadcrumbs-text-color: #6b7388;
    --breadcrumbs-border-color: transparent;
    /* Cards */
    --card-background-color: rgba(255, 255, 255, 0.94);
    --card-text-color: var(--default-text-color);
    --card-border-color: rgba(38, 49, 77, 0.08);
    --card-header-background-color: transparent;
    --card-header-text-color: var(--card-text-color);
    --card-body-background-color: transparent;
    --card-footer-backgorund-color: #fff3e6;
    /* Input */
    --input-background-color: #fff;
    --input-padding-x: 1.35em;
    --input-padding-y: 0.6em;
    --input-text-color: #26314d;
    --input-border-radius: 999px;
    /* Pills */
    --pills-background-color: #fff;
    --pills-background-color-active: #ffe4ee;
    --pills-background-color-hover: #fff3e6;
    --pills-text-color: var(--default-text-color);
    --pills-text-color-active: #26314d;
    /* Tabs */
    --tabs-pane-background-color: #fff;
    --tabs-pane-border-color: rgba(38, 49, 77, 0.08);
    --tabs-background-color: #fff3e6;
    --tabs-background-color-active: #fff;
    --tabs-text-color: #6b7388;
    --tabs-text-color-active: #26314d;
    --tabs-border-color: transparent;
    --tabs-border-color-active: transparent;
    --tabs-content-background-color: #fff;
    /* Dropdowns */
    --dropdown-menu-background-color: #fff8f3;
    --dropdown-menu-item-background-color: transparent;
    --dropdown-menu-item-text-color: var(--default-text-color);
    /* Tables */
    --table-striped-row-background-odd: #fff8f1;
    --table-striped-row-background-even: #fff;
    --table-row-hover-background: #fff3e6;
    /* Pagination */
    --pagination-background-color: #fff;
    --pagination-background-color-active: #ffe4ee;
    --pagination-background-color-hover: #fff3e6;
    --pagination-text-color: var(--default-text-color);
    --pagination-text-color-active: var(--default-text-color);
    --pagination-text-color-hover: var(--default-text-color);
    --pagination-border-color: rgba(38, 49, 77, 0.08);
    /* Footer */
    --footer-background-color: #26314d;
    --footer-title-color: #fff;
    --footer-text-color: #f8fbff;
    /* Copyright */
    --copyright-background-color: rgba(255, 255, 255, 0.08);
    --copyright-text-color: rgba(255, 255, 255, 0.78);
}
@media (min-width: 768px) {
    :root {
        --gutter-x: 1rem;
        --gutter-y: 1rem;
    }
}
@media (min-width: 992px) {
    :root {
        --gutter-x: 1.5rem;
        --gutter-y: 1.5rem;
    }
}
@media (min-width: 1200px) {
    :root {
        --gutter-x: 2rem;
        --gutter-y: 2rem;
    }
}
@media (max-width: 767px) {
    :root {
        --default-text-size: 15px;
    }
}
@media (max-width: 568px) {
    :root {
        --default-text-size: 14px;
    }
}