:root {
    --background-color: #ffffff;
    --default-fontfamily: vazirmatn;
    --nav-background: #f2f2f2;
    --nav-color: #326291;
    --nav-font-size: 1.2em;
    --nav-font-weight: 500;
    --nav-border-bottom: 1px solid #ccc;
    --nav-background-hover: #d3dde7;
    --nav-color-hover: #1874cd;
    --nav-font-size-hover: var(--nav-font-size);
    --nav-font-weight-hover: var(--nav-font-weight);
}

* {
    font-family: var(--default-fontfamily), sans-serif;
}

:root {
    --secondary-color: #333;
    --accent-color: #333;
    --text-color: #000000;
    --warning-color: #ffc107;
    --critical-color: #dc3545;
}
/* colors */
:root {
    --color-primary-bg: #0078D4;
    --color-primary-bg-disabled: #464646;
    --color-primary-bg-busy: #c75300;
    --color-primary-bg-hover: #005ea3;
    --color-primary-bg-active: #004071;
    --color-primary-text: #fff;
    --color-primary-text-disabled: #fff;
    --color-primary-text-busy: #fff;
    --color-primary-text-hover: #fff;
    --color-primary-text-active: #fff;
}

:root {
    --color-secondary-bg: #909090;
    --color-secondary-bg-disabled: #464646;
    --color-secondary-bg-busy: #c75300;
    --color-secondary-bg-hover: #767676;
    --color-secondary-bg-active: #6d6d6d;
    --color-secondary-text: #fff;
    --color-secondary-text-disabled: #fff;
    --color-secondary-text-busy: #fff;
    --color-secondary-text-hover: #fff;
    --color-secondary-text-active: #fff;
}

:root {
    --color-warning-bg: #ffc107;
    --color-warning-bg-disabled: #464646;
    --color-warning-bg-busy: #c75300;
    --color-warning-bg-hover: #dda80a;
    --color-warning-bg-active: #b08607;
    --color-warning-text: #000;
    --color-warning-text-disabled: #000;
    --color-warning-text-busy: #000;
    --color-warning-text-hover: #000;
    --color-warning-text-active: #000;
}

:root {
    --color-critical-bg: #dc3545;
    --color-critical-bg-disabled: #464646;
    --color-critical-bg-busy: #c75300;
    --color-critical-bg-hover: #c1303e;
    --color-critical-bg-active: #ad2d39;
    --color-critical-text: #fff;
    --color-critical-text-disabled: #fff;
    --color-critical-text-busy: #fff;
    --color-critical-text-hover: #fff;
    --color-critical-text-active: #fff;
}

:root {
    --color-success-bg: #dc3545;
    --color-success-bg-disabled: #464646;
    --color-success-bg-busy: #c75300;
    --color-success-bg-hover: #c1303e;
    --color-success-bg-active: #ad2d39;
    --color-success-text: #fff;
    --color-success-text-disabled: #fff;
    --color-success-text-busy: #fff;
    --color-success-text-hover: #fff;
    --color-success-text-active: #fff;
}