:root {
    /* Colors  */
    --black: #000000;
    --white: #ffffff;

    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-light: #c2c4ca;

    --blue-50: #eff6ff;
    --blue-100: #eff6ff;
    --blue-200: #dfe9ff;
    --blue-250: #b9d8ff;
    --blue-300: #a5c0ff;
    --blue-400: #4d7fc8;
    --blue-500: #173e97;
    --blue-600: #153a90;
    --blue-700: #102e72;
    --blue-850: #050a20;
    --blue-900: #020617;

    --gradient-1: linear-gradient(45deg, #0d2b66, #134794);
    --gradient-2: linear-gradient(45deg, #b9d8ff, #e7f1ff);
    --gradient-scroll-1: linear-gradient(0deg, #0d2b66, #134794);
    --gradient-scroll-2: linear-gradient(0deg, #b9d8ff, #e7f1ff);

    --red-900: #452434;
    --red-500: #ea443a;
    --red-400: #f87171;
    --red-200: #fee2e2;
    --red-250: #f9dcdc;
    --red-100: #fbece6;

    --green-900: #334b55;
    --green-500: #31a391;
    --green-400: #76e5d4;
    --green-200: #d5eeea;
    --green-100: #d5eeea;

    --yellow-900: #615239;
    --yellow-500: #ff9d00;
    --yellow-200: #ffe6bd;

    --overlay-red-40: rgba(234, 68, 58, 0.4);
    --overlay-red-10: rgba(234, 68, 58, 0.1);
    --overlay-green-40: rgba(49, 163, 145, 0.4);

    /* Other vars */
    --border-radius-tiny: 4px;
    --border-radius-small: 8px;
    --border-radius-regular: 16px;
    --border-radius-big: 20px;

    --btn-border-radius: var(--border-radius-small);
    --form-radius: var(--border-radius-regular);
    --form-panel-radius: var(--border-radius-big);
    --cab-create-card-form-panel-radius: var(--border-radius-small);
    --form-control-radius: var(--border-radius-small);
    --lang-menu-border-radius: var(--border-radius-tiny);
    --cab-sidebar-nav-link-border: var(--border-radius-small);
    --cab-page-headline-badge-radius: var(--border-radius-tiny);
    --table-border-radius: var(--border-radius-small);
    --sweet-modal-border-radius: var(--border-radius-big);

    /* Desktop */
    @media (min-width: 992px) {
        --form-radius: var(--border-radius-big);
        --lang-menu-border-radius: var(--border-radius-small);
        --cab-create-card-form-panel-radius: var(--border-radius-big);
    }
}

/* Color theme - Light, default */
:root,
body[data-theme="light"] {
    --simple-scroll-bar: var(--gradient-scroll-2);

    --landing-bg: var(--white);
    --header-nav-link: var(--gray-900);

    --btn-primary: var(--blue-500);
    --btn-primary-hovered: #153a90;
    --btn-primary-pressed: #102e72;
    --btn-primary-disabled: var(--gray-50);
    --btn-primary-color-disabled: var(--gray-400);
    --btn-primary-text: var(--white);

    --btn-info: var(--gray-100);
    --btn-info-border: var(--gray-100);
    --btn-info-hovered: var(--white);
    --btn-info-hovered-border: var(--blue-300);
    --btn-info-pressed: var(--gray-100);
    --btn-info-pressed-border: var(--blue-200);
    --btn-info-disabled: var();
    --btn-info-color-disabled: var();
    --btn-info-text: var(--blue-900);

    --header-menu-btn: #000;
    --header-link: var(--blue-500);
    --app-header-menu-btn-border: #e7f1ff;
    --app-header-menu-btn-bg: var(--white);
    --app-header-menu-btn-color: #000;
    --app-header-menu-btn-shadow: 1px 1px 6px rgb(0, 0, 0, 0.11);
    --header-modal-shadow: rgba(148, 163, 184, 0.5);
    --header-modal-close: var(--black);
    --header-modal-lang: var(--gray-300);
    --header-modal-open-bg: #f8fafc;

    --sweet-modal-shadow: rgba(148, 163, 184, 0.5);
    --sweet-modal-bg: var(--white);
    --sweet-modal-color-title: var(--black);
    --sweet-modal-color-text: var(--gray-600);

    --landing-h4-color: var(--gray-900);
    --landing-h4-desc-color: var(--gray-500);
    --landing-doc-color: var(--blue-500);
    --landing-doc-border: #e7f1ff;
    --page-form-detail: var(--gray-900);

    --rules-content-bg: var(--white);
    --rules-content-text: var(--gray-900);

    --page-signin-bg: url("../images/leks/page-signin-light.png");
    --section-faq-bg: url("../images/leks/faq-light.png");

    --form-bg: var(--white);
    --form-panel-bg: var(--white);
    --form-title: var(--black);
    --form-nav-link: var(--gray-600);
    --form-nav-link-active: var(--blue-700);
    --form-nav-link-active-border: var(--blue-500);
    --form-field-border: var(--gray-300);
    --form-reset-link: var(--blue-500);
    --form-reset-link-active: var(--blue-600);

    --form-control-border-error: rgba(229, 86, 77, 0.97);
    --form-control-border: var(--gray-300);
    --form-control-border-focus: var(--gray-500);
    --form-control-color: var(--gray-900);
    --form-control-color-placeholder: var(--gray-600);

    --form-checkbox-label: var(--black);
    --form-checkbox-bg: var(--gray-50);
    --form-checkbox-bg-checked: var(--blue-500);

    --home-bg: var(--white);
    --home-pic: url("../images/leks/home-light.png");

    --faq-section-bg: var(--gray-100);
    --faq-border: var(--gray-100);
    --faq-bg: var(--white);
    --faq-title: var(--black);
    --faq-text: var(--gray-600);

    --perspective-bg: var(--gray-100);

    --investor-section-bg: var(--white);
    --investor-gradient: linear-gradient(
        26.32deg,
        #0d2b66 -1.34%,
        #134794 100%
    );
    --investor-box-shadow: 0px 0px 40px 0px rgba(18, 59, 120, 0.4) inset;
    --investor-pic: url("../images/leks/investor-light.png");
    --investor-title: var(--gray-100);
    --investor-text: var(--gray-300);

    --about-bg: var(--gray-50);
    --about-title: var(--gray-900);
    --about-desc: var(--gray-500);
    --about-ico: url("../images/leks/about-ico-light.svg");
    --about-ico-color: var(--blue-500);
    --about-item-title: var(--gray-900);
    --about-item-text: var(--gray-800);
    --about-decor-ellipse-5-mob: url("../images/leks/about-ellipses-light/ellipse-5-mob.png");
    --about-decor-ellipse-5: url("../images/leks/about-ellipses-light/ellipse-5.png");
    --about-decor-ellipse-6: url("../images/leks/about-ellipses-light/ellipse-6.png");
    --about-decor-ellipse-7: url("../images/leks/about-ellipses-light/ellipse-7.png");
    --about-decor-ellipse-8: url("../images/leks/about-ellipses-light/ellipse-8.png");

    --check-pic: url("../images/leks/page-check-light.png");
    --check-score-bg: var(--white);
    --check-score-head-border: var(--gray-200);
    --check-score-head-title: var(--black);
    --check-score-head-date: var(--gray-500);
    --check-score-line-name: var(--gray-600);
    --check-score-line-value: var(--black);

    --check-section-form-bg: linear-gradient(
        26.32deg,
        #0d2b66 -1.34%,
        #134794 100%
    );
    --check-section-form-pic-rt: url("../images/leks/page-check-form-rt-light.png");
    --check-section-form-pic-lb: url("../images/leks/page-check-form-lb-light.png");
    --check-section-form-title: var(--gray-100);
    --check-section-form-desc: var(--gray-200);
    --check-form-bg: var(--white);
    --check-form-result-bg: var(--blue-100);

    --check-form-result-title: var(--black);
    --check-form-result-descr: var(--gray-500);
    --check-form-result-descr-link: var(--blue-600);

    --check-form-p: var(--gray-500);

    --alert-success-border: var(--green-100);
    --alert-success-bg: var(--green-100);
    --alert-success-color: var(--green-500);

    --lang-menu-bg: var(--blue-200);
    --lang-menu-bg-selected: var(--blue-400);
    --lang-menu-color: var(--black);
    --lang-menu-color-selected: var(--blue-200);
    --lang-menu-border: var(--gray-light);

    --cab-bg: var(--gray-100);
    --cab-sidebar-bg: var(--blue-700);

    --cab-sidebar-profile-bg: var(--blue-500);
    --cab-sidebar-profile-border: var(--blue-500);
    --cab-sidebar-profile-radius: var(--border-radius-small);
    --cab-sidebar-profile-text: var(--white);

    --cab-sidebar-nav-link: var(--blue-200);
    --cab-sidebar-nav-link-hover: var(--gray-50);
    --cab-sidebar-nav-link-active: var(--gray-50);
    --cab-sidebar-nav-link-active-bg: var(--blue-500);

    --cab-sidebar-link: var(--blue-300);

    --cab-sidebar-hr: var(--blue-500);

    --cab-sidebar-footer-text: var(--gray-400);
    --cab-sidebar-footer-link: var(--gray-400);

    --cab-page-headline-title: var(--black);
    --cab-page-headline-badge: var(--gray-600);
    --cab-page-headline-badge-bg: var(--gray-200);

    --table-bg: var(--white);
    --table-border: var(--gray-200);

    --table-th-bg: var(--white);
    --table-th-color: var(--black);
    --table-th-border: var(--gray-200);

    --table-td-bg: var(--white);
    --table-td-color: var(--black);
    --table-td-border: var(--gray-50);

    --table-td-bg-even: var(--gray-100);
    --table-td-color-even: var(--black);
    --table-td-border-even: var(--gray-50);

    --label-default-bg: var();
    --label-default-color: var();
    --label-primary-bg: var();
    --label-primary-color: var();
    --label-success-bg: var(--green-100);
    --label-success-color: var(--green-500);
    --label-info-bg: var();
    --label-info-color: var();
    --label-warning-bg: var(--yellow-200);
    --label-warning-color: var(--yellow-500);
    --label-danger-bg: var(--red-200);
    --label-danger-color: var(--red-500);

    --cab-invoice-card-bg: var(--white);
    --cab-invoice-card-color: var(--black);
    --cab-invoice-card-color-mute: var(--gray-500);

    --cab-create-card-form-panel-decor-bg: var(--gray-50);
    --cab-create-card-hr: var(--gray-200);
    --cab-create-notice-color: var(--black);

    --file-upload-bg: var(--gray-50);
    --file-upload-border: var(--gray-300);
    --file-upload-ico: var(--blue-500);
    --file-upload-title: var(--black);
    --file-upload-allow: var(--gray-700);

    --cab-page-footer-action-bg: var(--gray-100);
    --cab-page-footer-action-shadow: rgba(23, 62, 151, 0.15);

    --cab-mobcard-bg: var(--white);
    --cab-mobcard-action-link: var(--gray-500);

    --cab-progress-title: var(--black);
    --cab-progress-spacer: var(--gray-300);
    --cab-progress-bul-bg: var(--blue-500);
    --cab-progress-bul-text: var(--white);
    --cab-progress-bul-check-bg: var(--green-500);
    --cab-progress-bul-check-text: var(--white);    
}

/* Color theme - Dark */
body[data-theme="dark"] {
    --simple-scroll-bar: var(--gradient-scroll-1);

    --landing-bg: var(--blue-900);
    --header-nav-link: var(--white);

    --btn-primary: #4d7fc8;
    --btn-primary-hovered: #153a90;
    --btn-primary-pressed: #153a90;
    --btn-primary-disabled: var(--gray-700);
    --btn-primary-color-disabled: var(--gray-500);
    --btn-primary-text: var(--white);

    --btn-info: var(--gray-800);
    --btn-info-border: var(--gray-800);
    --btn-info-hovered: var(--gray-800);
    --btn-info-hovered-border: var(--blue-400);
    --btn-info-pressed: var(--gray-700);
    --btn-info-pressed-border: var(--blue-400);
    --btn-info-disabled: var();
    --btn-info-color-disabled: var();
    --btn-info-text: var(--white);

    --header-menu-btn: var(--white);
    --header-link: var(--white);
    --app-header-menu-btn-border: var(--blue-300);
    --app-header-menu-btn-bg: var(--gray-800);
    --app-header-menu-btn-color: var(--blue-300);
    --app-header-menu-btn-shadow: 1px 1px 6px rgb(0, 0, 0, 0.11);
    --header-modal-shadow: rgba(15, 23, 42, 0.7);
    --header-modal-close: var(--gray-400);
    --header-modal-lang: var(--gray-600);
    --header-modal-open-bg: var(--gray-800);

    --sweet-modal-shadow: rgba(15, 23, 42, 0.7);
    --sweet-modal-bg: var(--gray-800);
    --sweet-modal-color-title: var(--white);
    --sweet-modal-color-text: var(--gray-400);

    --landing-h4-color: var(--gray-100);
    --landing-h4-desc-color: var(--gray-200);
    --landing-doc-color: var(--blue-300);
    --landing-doc-border: var(--gray-800);
    --page-form-detail: var(--white);

    --rules-content-bg: var(--gray-800);
    --rules-content-text: var(--gray-100);

    --page-signin-bg: url("../images/leks/page-signin-dark.png");
    --section-faq-bg: url("../images/leks/faq-dark.png");

    --form-bg: var(--gray-800);
    --form-panel-bg: var(--gray-800);
    --form-title: var(--white);
    --form-nav-link: var(--gray-500);
    --form-nav-link-active: var(--white);
    --form-nav-link-active-border: var(--gray-500);
    --form-field-border: var(--gray-600);
    --form-reset-link: var(--blue-300);
    --form-reset-link-active: var(--blue-400);

    --form-control-border-error: rgba(229, 86, 77, 0.97);
    --form-control-border: var(--gray-600);
    --form-control-border-focus: var(--gray-400);
    --form-control-color: var(--white);
    --form-control-color-placeholder: var(--gray-400);

    --form-checkbox-label: var(--white);
    --form-checkbox-bg: var(--gray-800);
    --form-checkbox-bg-checked: var(--blue-400);

    --home-bg: var(--blue-900);
    --home-pic: url("../images/leks/home-dark.png");

    --faq-section-bg: var(--blue-850);
    --faq-border: var(--gray-800);
    --faq-bg: var(--blue-900);
    --faq-title: var(--white);
    --faq-text: var(--gray-300);

    --perspective-bg: var(--blue-850);

    --investor-section-bg: var(--blue-900);
    --investor-gradient: linear-gradient(
        26.32deg,
        #020617 -1.34%,
        #061030 100%
    );
    --investor-box-shadow: 0px 0px 40px 0px rgba(18, 59, 120, 0.4) inset;
    --investor-pic: url("../images/leks/investor-dark.png");
    --investor-title: var(--gray-100);
    --investor-text: var(--gray-300);

    --about-bg: var(--blue-850);
    --about-title: var(--gray-100);
    --about-desc: var(--gray-300);
    --about-ico: url("../images/leks/about-ico-dark.svg");
    --about-ico-color: var(--blue-500);
    --about-item-title: var(--gray-100);
    --about-item-text: var(--gray-300);
    --about-decor-ellipse-5-mob: url("../images/leks/about-ellipses-dark/ellipse-5-mob.png");
    --about-decor-ellipse-5: url("../images/leks/about-ellipses-dark/ellipse-5.png");
    --about-decor-ellipse-6: url("../images/leks/about-ellipses-dark/ellipse-6.png");
    --about-decor-ellipse-7: url("../images/leks/about-ellipses-dark/ellipse-7.png");
    --about-decor-ellipse-8: url("../images/leks/about-ellipses-dark/ellipse-8.png");

    --check-pic: url("../images/leks/page-check-dark.png");
    --check-score-bg: var(--gray-700);
    --check-score-head-border: var(--gray-600);
    --check-score-head-title: var(--white);
    --check-score-head-date: var(--gray-400);
    --check-score-line-name: var(--gray-400);
    --check-score-line-value: var(--white);

    --check-section-form-bg: linear-gradient(
        26.32deg,
        #020617 -1.34%,
        #061030 100%
    );
    --check-section-form-pic-rt: url("../images/leks/page-check-form-rt-dark.png");
    --check-section-form-pic-lb: url("../images/leks/page-check-form-lb-dark.png");
    --check-section-form-title: var(--gray-100);
    --check-section-form-desc: var(--gray-400);
    --check-form-bg: var(--gray-800);
    --check-form-result-bg: var(--gray-900);

    --check-form-result-title: var(--gray-100);
    --check-form-result-descr: var(--gray-400);
    --check-form-result-descr-link: var(--blue-500);

    --check-form-p: var(--gray-400);

    --alert-success-border: var(--green-900);
    --alert-success-bg: var(--green-900);
    --alert-success-color: var(--green-400);

    --lang-menu-bg: var(--gray-700);
    --lang-menu-bg-selected: var(--blue-700);
    --lang-menu-color: var(--white);
    --lang-menu-color-selected: var(--blue-200);
    --lang-menu-border: var(--gray-light);

    --cab-bg: var(--blue-900);
    --cab-sidebar-bg: var(--gray-900);

    --cab-sidebar-profile-bg: var(--gray-800);
    --cab-sidebar-profile-border: var(--gray-600);
    --cab-sidebar-profile-radius: var(--border-radius-small);
    --cab-sidebar-profile-text: var(--white);

    --cab-sidebar-nav-link: var(--blue-200);
    --cab-sidebar-nav-link-hover: var(--gray-50);
    --cab-sidebar-nav-link-active: var(--gray-50);
    --cab-sidebar-nav-link-active-bg: var(--gray-800);

    --cab-sidebar-link: var(--blue-300);

    --cab-sidebar-hr: var(--gray-700);

    --cab-sidebar-footer-text: var(--gray-400);
    --cab-sidebar-footer-link: var(--gray-400);

    --cab-page-headline-title: var(--white);
    --cab-page-headline-badge: var(--gray-100);
    --cab-page-headline-badge-bg: var(--gray-500);

    --table-bg: var(--gray-700);
    --table-border: var(--gray-700);

    --table-th-bg: var(--gray-700);
    --table-th-color: var(--gray-300);
    --table-th-border: var(--gray-700);

    --table-td-bg: var(--gray-800);
    --table-td-color: var(--white);
    --table-td-border: var(--gray-700);

    --table-td-bg-even: var(--gray-700);
    --table-td-color-even: var(--white);
    --table-td-border-even: var(--gray-700);

    --label-default-bg: var();
    --label-default-color: var();
    --label-primary-bg: var();
    --label-primary-color: var();
    --label-success-bg: var(--green-900);
    --label-success-color: var(--green-500);
    --label-info-bg: var();
    --label-info-color: var();
    --label-warning-bg: var(--yellow-900);
    --label-warning-color: var(--yellow-500);
    --label-danger-bg: var(--red-900);
    --label-danger-color: var(--red-400);

    --cab-invoice-card-bg: var(--gray-800);
    --cab-invoice-card-color: var(--white);
    --cab-invoice-card-color-mute: var(--gray-400);

    --cab-create-card-form-panel-decor-bg: var(--gray-900);
    --cab-create-card-hr: var(--gray-700);
    --cab-create-notice-color: var(--white);

    --file-upload-bg: var(--gray-700);
    --file-upload-border: var(--gray-500);
    --file-upload-ico: var(--blue-400);
    --file-upload-title: var(--white);
    --file-upload-allow: var(--gray-400);

    --cab-page-footer-action-bg: var(--gray-800);
    --cab-page-footer-action-shadow: rgba(23, 62, 151, 0.15);

    --cab-mobcard-bg: var(--gray-800);
    --cab-mobcard-action-link: var(--gray-400);

    --cab-progress-title: var(--white);
    --cab-progress-spacer: var(--gray-300);
    --cab-progress-bul-bg: var(--blue-500);
    --cab-progress-bul-text: var(--white);
    --cab-progress-bul-check-bg: var(--green-500);
    --cab-progress-bul-check-text: var(--white); 
}