:root {
    --zm-font-family-primary: "Mestiza", serif;
    --zm-font-family-secondary: "Inter", sans-serif;
    --zm-global-color-grey: #303030;
    --zm-global-color-grey-shade: #2b2b2b;
    --zm-global-color-grey-tint: #454545;
    --zm-global-color-grey-2: #929292;
    --zm-global-color-grey-2-tint: #bebebe;
    --zm-global-color-grey-2-shade: #585858;
    --zm-global-color-grey-3: #e6e6e6;
    --zm-global-color-grey-4: #e5e5e5;
    --zm-global-color-grey-5: #f4f4f4;
    --zm-global-color-sand: #e6dfd5;
    --zm-global-color-white: #ffffff;
    --zm-global-color-orange: #fb984e;
    --zm-global-color-orange-shade: #fba260;
}

:root,
.theme-dark {
    --zm-bg-color: var(--zm-global-color-grey);
    --zm-text-color: var(--zm-global-color-white);
    --zm-text-color-secondary: var(--zm-global-color-grey-2);
    --zm-border-color: var(--zm-global-color-white);
    --zm-bg-surface: var(--zm-global-color-white);
    --zm-surface-bg-variant: var(--zm-global-color-grey-5);
    --zm-surface-bg-variant-stronger: var(--zm-global-color-grey-4);
    --zm-surface-border-color: var(--zm-global-color-grey);
    --zm-surface-border-color-variant: var(--zm-global-color-grey-2);
    --zm-surface-text-color: var(--zm-global-color-grey);
    --zm-surface-bg-alt: var(--zm-global-color-grey-2);
    --zm-surface-border-color: var(--zm-global-color-grey-2);

    --zm-btn-primary-bg: var(--zm-global-color-orange);
    --zm-btn-primary-color: var(--zm-global-color-grey);
    --zm-btn-primary-hover-bg: var(--zm-global-color-orange-shade);
    --zm-btn-primary-hover-color: var(--zm-global-color-grey);

    --zm-btn-secondary-bg: var(--zm-global-color-white);
    --zm-btn-secondary-color: var(--zm-global-color-grey);
    --zm-btn-secondary-hover-bg: var(--zm-global-color-grey-3);
    --zm-btn-secondary-hover-color: var(--zm-global-color-grey);

    --zm-btn-cta-bg: var(--zm-global-color-orange);
    --zm-btn-cta-color: var(--zm-global-color-grey);
    --zm-btn-cta-hover-bg: var(--zm-global-color-orange-shade);
    --zm-btn-cta-hover-color: var(--zm-global-color-grey);

    --zm-btn-surface-secondary-bg: var(--zm-global-color-grey);
    --zm-btn-surface-secondary-color: var(--zm-global-color-grey);
    --zm-btn-surface-secondary-hover-bg: var(--zm-global-color-grey-3);
    --zm-btn-surface-secondary-hover-color: var(--zm-global-color-grey);

    --zm-btn-secondary-inverse-bg: var(--zm-global-color-grey);
    --zm-btn-secondary-inverse-color: var(--zm-global-color-white);
    --zm-btn-secondary-inverse-hover-bg: var(--zm-global-color-grey-tint);
    --zm-btn-secondary-inverse-hover-color: var(--zm-global-color-white);

    --zm-btn-surface-secondary-outline-inverse-border-color: var(
        --zm-global-color-grey
    );
    --zm-btn-surface-secondary-outline-inverse-color: var(
        --zm-global-color-grey
    );
    --zm-btn-surface-secondary-outline-inverse-hover-bg: var(
        --zm-global-color-grey
    );
    --zm-btn-surface-secondary-outline-inverse-hover-border-color: var(
        --zm-global-color-grey
    );
    --zm-btn-surface-secondary-outline-inverse-hover-color: var(
        --zm-global-color-white
    );

    --zm-input-bg: var(--zm-global-color-grey);
    --zm-input-color: var(--zm-global-color-white);
    --zm-input-border-color: var(--zm-global-color-white);
    --zm-input-focus-bg: var(--zm-global-color-grey);
    --zm-input-focus-color: var(--zm-global-color-white);
    --zm-input-focus-border-color: var(--zm-global-color-white);

    --zm-input-inverse-bg: var(--zm-global-color-white);
    --zm-input-inverse-color: var(--zm-global-color-grey);
    --zm-input-inverse-border-color: var(--zm-global-color-grey-2);
    --zm-input-focus-inverse-bg: var(--zm-global-color-white);
    --zm-input-focus-inverse-color: var(--zm-global-color-grey);
    --zm-input-focus-inverse-border-color: var(--zm-global-color-grey);

    --zm-file-input-button-bg: var(--zm-global-color-grey);
    --zm-file-input-button-color: var(--zm-global-color-white);
    --zm-file-input-button-border-color: var(--zm-global-color-gray);
    --zm-file-input-button-focus-bg: var(--zm-global-color-grey-tint);
    --zm-file-input-button-focus-color: var(--zm-global-color-white);
    --zm-file-input-button-focus-border-color: var(--zm-global-color-gray-tint);

    --zm-checkbox-bg: var(--zm-global-color-grey);
    --zm-checkbox-checkmark-color: var(--zm-global-color-grey);
    --zm-checkbox-border-color: var(--zm-global-color-white);
    --zm-checkbox-focus-bg: var(--zm-global-color-grey);
    --zm-checkbox-focus-border-color: var(--zm-global-color-white);
    --zm-checkbox-checked-bg: var(--zm-global-color-white);
    --zm-checkbox-checked-border-color: var(--zm-global-color-white);

    --zm-checkbox-inverse-bg: var(--zm-global-color-white);
    --zm-checkbox-inverse-checkmark-color: var(--zm-global-color-white);
    --zm-checkbox-inverse-border-color: var(--zm-global-color-grey-2);
    --zm-checkbox-focus-inverse-bg: var(--zm-global-color-white);
    --zm-checkbox-focus-inverse-border-color: var(--zm-global-color-grey);
    --zm-checkbox-checked-inverse-bg: var(--zm-global-color-grey);
    --zm-checkbox-checked-inverse-border-color: var(--zm-global-color-grey);

    --zm-select-bg: var(--zm-input-bg);
    --zm-select-color: var(--zm-input-color);
    --zm-select-border-color: var(--zm-input-border-color);
    --zm-select-focus-bg: var(--zm-input-focus-bg);
    --zm-select-focus-color: var(--zm-input-focus-color);
    --zm-select-focus-border-color: var(--zm-input-focus-border-color);

    --zm-select-dropdown-bg: var(--zm-global-color-grey-5);
    --zm-select-dropdown-color: var(--zm-global-color-grey);
    --zm-select-dropdown-border-color: var(--zm-global-color-grey-5);
    --zm-select-dropdown-focus-bg: var(--zm-global-color-grey-4);
    --zm-select-dropdown-focus-color: var(--zm-global-color-grey);
    --zm-select-dropdown-active-bg: var(--zm-global-color-orange);
    --zm-select-dropdown-active-color: var(--zm-global-color-grey);

    --zm-form-inverse-color: var(--zm-global-color-grey);

    --zm-pager-bg: var(--zm-global-color-grey);
    --zm-pager-color: var(--zm-global-color-white);
}

.theme-light {
    --zm-bg-color: var(--zm-global-color-white);
    --zm-text-color: var(--zm-global-color-grey);
    --zm-border-color: var(--zm-global-color-grey);
    --zm-surface-bg: var(--zm-global-color-grey);
    --zm-surface-text-color: var(--zm-global-color-white);

    --zm-pager-bg: var(--zm-global-color-grey);
    --zm-pager-color: var(--zm-global-color-white);
}

.theme-front {
    --zm-bg-color: transparent;
    --zm-text-color: var(--zm-global-color-grey);
    --zm-text-color-secondary: var(--zm-global-color-grey-2);
    --zm-border-color: var(--zm-global-color-grey);
    --zm-bg-surface: var(--zm-global-color-white);
    --zm-surface-bg-variant: var(--zm-global-color-grey-5);
    --zm-surface-bg-variant-stronger: var(--zm-global-color-grey-4);
    --zm-surface-border-color: var(--zm-global-color-grey);
    --zm-surface-border-color-variant: var(--zm-global-color-grey-2);
    --zm-surface-bg-alt: var(--zm-global-color-grey-2);
}