/* VARIABLES ONLY */

:root /* COLOR VARIABLES */
{
    --DefaultBlueColor: #007aff;
    --DefaultBackColor: #f8f8f8;
    --DefaultDarkColor: #424C55;
    --DefaultTextColor: #424C55;
    --DefaultLabelColor: #888888;
    --InputBackColor: rgba(0, 0, 0, 0.03);
    --LiteBorderColor: rgba(0, 0, 0, 0.03);


    --InfoColor: #44ADE1;
    --InfoColorLite: #d9edf7;

    --SuccessColor: #5cb85c;
    --SuccessColorLite: #dff0d8;

    --WarningColor: #ff9800;
    --WarningColorLite: #fcf8e3;

    --DangerColor: #d9534f;
    --DangerColorLite: #f2dede;
}


:root.touch-device{
	--font-size-root: 16px;
}

:root /* FONT VARIABLES */
{
    /*
    https://css-tricks.com/snippets/css/system-font-stack/
    https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
    */

    /* these fonts are intentionally ordered */
    --FontStack: -apple-system, system-ui, BlinkMacSystemFont,
                "Segoe UI", Roboto, Oxygen,
                Ubuntu, Cantarell, "Fira Sans",
				"Droid Sans", "Helvetica Neue", sans-serif;

	--font-size-root: 14px;/* this will be our 1rem */
    --line-height: 1.4;

	--font-size-xs: 0.625rem;/* 10px */
	--font-size-sm: 0.75rem;/* 12px */
	--font-size-md: 0.875rem;/* 14px */
	--font-size-lg: 1rem;/* 16px */
	--font-size-xl: 1.125rem;/* 18px */
	--font-size-2xl: 1.5rem;/* 24px */
	--font-size-3xl: 2.25rem;/* 36px */
	--font-size-4xl: 3rem;/* 48px */
	--font-size-5xl: 4rem;/* 64px */

	--font-size-h1: 2.5rem; /* 40px */
	--font-size-h2: 2rem; /* 32px */
	--font-size-h3: 1.75rem; /* 28px */
	--font-size-h4: 1.5rem; /* 24px */
	--font-size-h5: 1.25rem; /* 20px */
	--font-size-h6: 1rem; /* 16px */

	--icon-size-xs: 1em;/* 16px */
	--icon-size-sm: 1.125em;/* 18px */
	--icon-size-md: 1.5em;/* 24px */
	--icon-size-lg: 2.25em;/* 36px */
	--icon-size-xl: 3em;/* 48px */

	--font-wt-thin: 300;
    --font-wt-normal: 400;
    --font-wt-bold: 600;
    --font-wt-bolder: 700;
    --font-wt-boldest: 800;
}