@media screen and (min-width: 800px) {
    :root {
        --spacing-xs: 0.5rem;
        --spacing-sm: 1rem;
        --spacing: 1.5rem;
        --spacing-lg: 2rem;
    }
}

@media screen and (max-width: 800px) {
    :root {
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing: 0.75rem;
        --spacing-lg: 1rem;
    }
}

:root {
    --padding: var(--spacing);
    --padding-sm: var(--spacing-sm);
    --padding-xs: var(--spacing-xs);
    --padding-xxs: 0.125rem;
    --layout-padding: var(--spacing);
    --layout-margin: var(--spacing);
    --block-margin: 0 0 var(--spacing) 0;
    --block-padding: 0 0 var(--spacing) 0;

    --card-font-size: 1rem;
    --card-light-grey: #fafafa;

    --border: 1px solid var(--border-color);
    --border-2: 1px solid var(--border-color-2);
    --bs-border-color: var(--border-color);

    --border-radius: var(--spacing-sm);
    --border-radius-md: var(--spacing-xs);
    --border-radius-sm: 0.2rem;
    --border-radius-lg: var(--spacing-lg);
    --border-radius-layout: var(--spacing-sm);
    --border-radius-layout-double-screen: 0.32rem;

    /* New Colors, do not use directly */
    --new-colors-1: #103656;
    --new-colors-2: #00A97D;
    --new-colors-3: #852AD0;
    --new-colors-brand-sofia: #203951;
    --new-colors-brand-sofia-final: #0d3656;

    --fa-primary-color: var(--color-brand);
    --fa-secondary-color: var(--palette-color-15);
    --fa-secondary-opacity: 1;

    --color-brand: #0d3656;
    --color-brand-hover: #0d3656;
    --color-brand-2: #F26522;

    --color-brand-dark: #2d5676;
    --color-brand-dark-hover: #2d5676;
    --color-brand-dark-2: #F26522;

    --color-off-black: #333333;

    --palette-color-1: #7764E4;
    --palette-color-2: #c0b9e5;
    --palette-color-3: #3D5A80;
    --palette-color-3-hover: #368;
    --palette-color-4: #71A6C6;
    --palette-color-5: #014D40;
    --palette-color-6: #00A97D;
    --palette-color-7: #88d09c;
    --palette-color-8: #666;
    --palette-color-9: #E0FFEA;
    --palette-color-10: #41A5F3;
    --palette-color-11: #0E47A1;
    --palette-color-12: #90CAF8;
    --palette-color-13: #C6E5FD;
    --palette-color-14: #ffbb00;
    --palette-color-15: #F26522;
    --palette-color-16: #FF6D54;
    --palette-color-17: #D8DEE6;
    --palette-color-18: #F0F0F0;
    --palette-color-19: #E7EBEF;

    --palette-color-positive: #0c0;
    --palette-color-negative: #c00;
    --palette-color-neutral: #00c;

    --palette-font-color-1: #fff;


    --viber-brand-color: #7360f2;
    --rcs-brand-color: #7360f5;
    --whatsapp-brand-color-dark: #075e54;
    --whatsapp-brand-color-middle: #128c7e;
    --whatsapp-brand-color-main: #25d366;
    --whatsapp-brand-color-light: #dcf8c6;
    --whatsapp-brand-color-bg: #ece5dd;

    --bg-code-head: #0d3656;
    --bg-code-body: #002646;

    --sidebar-width: 340px;
    --sidebar-width-negative: -340px;
    --sidebar-border: 1px solid var(--nav-border-color);

    --secondary-sidebar-width: 200px;

    --color-font-get-started: #fff;

    --th-font-size: 0.75rem;
    --th-line-height: 1.3125rem;
}

:root {
    --bg: #fff;
    --color: var(--color-brand);
    --color-faded: #737d8a;
    --color-code: #f8f8f2;
    --island-bg: #eeeef1;

    --bs-body-bg: #f7f7f7;
    --bs-body-color: var(--color);
    --bs-link-color: var(--color);

    --main-background: #fff;
    --panel-background: var(--main-background);

    --border-color: #e2e2e2;
    --border-color-2: var(--border-color);

    --link-color: var(--bs-link-color); /*consider removing this*/
    --faded-link-color: #9aa1aa;

    --color-cancel: #777;
    --color-cancel-hover: #999;

    --bs-code-bg: #eee;
    --bs-code-color: #d63384;

    --nav-bg-color: #fff;
    --nav-bg-active: #f6f6f9;
    --nav-bg-active-admin: #f8f8f8;
    --nav-group-active-color: #fff;
    --nav-border-color: var(--border-color);
    --nav-color: #555;
    --nav-color-active: #222;
    --nav-link-color: #000;

    --main-view-background: var(--bg);
    --main-view-background-onboarding: #f4f4f4;
    --onboarding-form-background: #FBFCFC;

    --input-background: #fff;
    --input-background-active: #fff;
    --input-background-disabled: #f5f5f5;

    --dropdown-menu-bg: #fff;
    --dropdown-menu-bg-hover: #e8e8e8;
    --dropdown-menu-color: var(--color);
    --dropdown-menu-color-hover: #444;

    --debug-color: #ffd;
    --modal-content-bg: #fff;
}

:root {
    --color-pending: var(--palette-color-14);

    --message-delivered: var(--palette-color-6);
    --message-not-delivered: var(--bs-danger);
    --message-pending: var(--color-pending);
    --message-user-blocked: var(--palette-color-3);
    --message-not-viber-user: var(--palette-color-10);
    --message-email-opened: var(--bs-info);
    --message-email-complaints: var(--palette-color-10);
    --message-email-sent: var(--palette-color-14);
    --message-not-rcs-user: var(--palette-color-10);
}

.table {
    --bs-table-bg: #fff;
    --bs-table-color: var(--color);

    --bs-table-hover-bg: #fefefe;
    --bs-table-hover-color: var(--color);

    --table-separator-bg: #fafafa;
    --table-separator-hover-bg: #fafafa;
}

.onboarding-card .onboarding-card-side.left-side {
    background-color: #ededef;
    background-image: url(../../images/onboarding_background.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    background-position-y: 150px;
}

.card {
    --bs-card-bg: #fff;
    --bs-card-cap-padding-y: 2rem;
    --card-emphasis: #eef;
    --card-light-grey: #fafafa;
    --card-lists-hover: #aaa;
}

.card-header {
    background-color: var(--bs-card-bg);
}

.mobile-preview {
    --mobile-preview-bg: #fff;
    --mobile-preview-color: var(--color);
    --mobile-preview-border-color: #e8e8e8;
    --mobile-preview-border-radius: 1rem;
}

.tablet-preview {
    --tablet-preview-bg: #fff;
    --tablet-preview-color: var(--color);
    --tablet-preview-border-color: #e8e8e8;
    --tablet-preview-border-radius: 1rem;
}

@media (prefers-color-scheme: nodark) {
    :root {
        --color-brand: var(--color-brand-dark);
        --color-brand-hover: var(--color-brand-dark);
        --color-brand-2: #0d3656;

        --bg: #111;
        --color: #ccc;
        --island-bg: #333;

        --bs-body-bg: #000;
        --bs-body-color: #ccc;
        --bs-link-color: #ddd;

        --main-background: #111;
        --panel-background: var(--main-background);

        --border-color: #333;
        --border-color-2: var(--border-color);

        --link-color: var(--bs-link-color);
        --faded-link-color: #9aa1aa;

        --color-cancel: #aaa;
        --color-cancel-hover: #ddd;
        --color-faded: #888;

        --bs-code-bg: #ddd;
        --bs-code-color: #d63384;

        --nav-bg-color: #000;
        --nav-bg-active: #111;
        --nav-group-active-color: #ddd;
        --nav-border-color: var(--border-color);
        --nav-color: #ccc;
        --nav-color-active: #ddd;
        --nav-link-color: #ccc;

        --main-view-background: var(--bg);
        --main-view-background-onboarding: #f4f4f4;
        --onboarding-form-background: #FBFCFC;

        --input-background: #222;
        --input-background-active: #333;
        --input-background-disabled: #333;

        --dropdown-menu-bg: #000;
        --dropdown-menu-bg-hover: #111;
        --dropdown-menu-color: #ccc;
        --dropdown-menu-color-hover: #ddd;

        --debug-color: #001;
        --modal-content-bg: #000;
    }

    .table {
        --bs-table-bg: #111;
        --bs-table-color: #eee;

        --bs-table-hover-bg: #333;
        --bs-table-hover-color: #fff;

        --table-separator-bg: #333;
        --table-separator-hover-bg: #444;
    }

    .card {
        --bs-card-bg: #111;
        --card-emphasis: #b04;
        --card-light-grey: #222;
    }

    .per-page {
        color: var(--color);
    }
}