/*
Theme Name: Mox
Theme URI: https://mox.lt
Author: Mox
Author URI: https://mox.lt
Version: 1.0.0
Text Domain: Mox
*/


body.default-styling {
    --color1: #171717; /* neutral */
    --color2: #4F772D; /* primary */
    --color3: #FDFEFD; /* background */
    --color4: #F6F8F4; /* active cards */
    --color5: #EAEFE6; /* border */
    --color6: #B3261E; /* red */
    --color7: #E1E1E3; /* grey */
    --color8: #979699; /* grey */

    --body-text-small-font-family: 'Open Sans';
    --body-text-small-font-size: 12px;
    --body-text-small-font-weight: 400;
    --body-text-small-line-height: 16px;
    --body-text-small-color: var(--color1);

    --body-text-font-family: 'Open Sans';
    --body-text-font-size: 14px;
    --body-text-font-weight: 400;
    --body-text-line-height: 20px;
    --body-text-color: var(--color1);

    --body-text-large-font-family: 'Open Sans';
    --body-text-large-font-size: 16px;
    --body-text-large-font-weight: 400;
    --body-text-large-line-height: 24px;
    --body-text-large-color: var(--color1);

    --button-text-font-family: 'Open Sans';
    --button-text-font-size: 14px;
    --button-text-font-weight: 500;
    --button-text-line-height: 20px;

    --h1-font-family: 'Open Sans';
    --h1-font-size: 45px;
    --h1-font-weight: 700;
    --h1-line-height: 52px;
    --h1-color: var(--color1);

    --h2-font-family: 'Open Sans';
    --h2-font-size: 36px;
    --h2-font-weight: 700;
    --h2-line-height: 44px;
    --h2-color: var(--color1);

    --h3-font-family: 'Open Sans';
    --h3-font-size: 22px;
    --h3-font-weight: 400;
    --h3-line-height: 28px;
    --h3-color: var(--color1);

    --h4-font-family: 'Open Sans';
    --h4-font-size: 18px;
    --h4-font-weight: 400;
    --h4-line-height: 1.2;
    --h4-color: var(--color1);

    --h5-font-family: 'Open Sans';
    --h5-font-size: 16px;
    --h5-font-weight: 400;
    --h5-line-height: 1.2;
    --h5-color: var(--color1);


    --label-font-family: 'Open Sans';
    --label-font-size: 14px;
    --label-font-weight: 500;
    --label-line-height: 20px;
    --label-color: var(--color1);
}


body.mox-styling {
    --color1: #0d0e18; /* neutral */
    --color2: #4343bc; /* primary */
    --color3: #ffffff; /* background */
    --color4: #f5f5f5; /* active cards */
    --color5: #ececec; /* border */
    --color6: #e70049; /* red */
    --color7: #f5f5f5; /* grey */
    --color8: #b3b3b3; /* grey */

    --body-text-small-font-family: 'Gellix-Light';
    --body-text-small-font-size: 16px;
    --body-text-small-font-weight: 300;
    --body-text-small-line-height: 24px;
    --body-text-small-color: var(--color1);

    --body-text-font-family: 'Gellix-Light';
    --body-text-font-size: 16px;
    --body-text-font-weight: 300;
    --body-text-line-height: 24px;
    --body-text-color: var(--color1);

    --body-text-large-font-family: 'Gellix-Light';
    --body-text-large-font-size: 16px;
    --body-text-large-font-weight: 300;
    --body-text-large-line-height: 24px;
    --body-text-large-color: var(--color1);	

    --button-text-font-family: 'Gellix-Light';
    --button-text-font-size: 16px;
    --button-text-font-weight: 300;
    --button-text-line-height: 24px;

    --h1-font-family: 'Gellix-Regular';
    --h1-font-size: 60px;
    --h1-font-weight: 400;
    --h1-line-height: 68px;
    --h1-color: var(--color1);

    --h2-font-family: 'Gellix-Regular';
    --h2-font-size: 48px;
    --h2-font-weight: 400;
    --h2-line-height: 56px;
    --h2-color: var(--color1);

    --h3-font-family: 'Gellix-Regular';
    --h3-font-size: 24px;
    --h3-font-weight: 400;
    --h3-line-height: 32px;
    --h3-color: var(--color1);

    --h4-font-family: 'Gellix-Regular';
    --h4-font-size: 20px;
    --h4-font-weight: 400;
    --h4-line-height: 28px;
    --h4-color: var(--color1);

    --h5-font-family: 'Gellix-Regular';
    --h5-font-size: 24px;
    --h5-font-weight: 400;
    --h5-line-height: 32px;
    --h5-color: var(--color1);

    --label-font-family: 'Gellix-Regular';
    --label-font-size: 16px;
    --label-font-weight: 400;
    --label-line-height: 24px;
    --label-color: var(--color1);
}