:root {
    --color-true-white: #ffffff;
    --color-true-black: #000000;

    --color-white: #ffffff;
    --color-grey: #969ea7;
    --color-black: #222834;

    --color-grey-light: #f9f9f9;
    --color-grey-dark: #c4c4c4;

    --color-primary: #ff6c3a;
    --color-secondary: #00ff00;
    --color-tertiary: #4ad5c0;

    --color-primary-light: #ffcccc;
    --color-secondary-light: #ccffcc;
    --color-tertiary-light: #ccccff;

    --color-primary-dark: #994123;
    --color-secondary-dark: #009900;
    --color-tertiary-dark: #000099;

    --color-text-black: var(--color-black);
    --color-text-grey: #6a7483;
    --color-text-white: var(--color-white);

    --color-text-on-primary: var(--color-white);
    --color-text-on-secondary: var(--color-black);
    --color-text-on-tertiary: var(--color-black);

    --color-text-on-primary-light: var(--color-white);
    --color-text-on-secondary-light: var(--color-white);
    --color-text-on-tertiary-light: var(--color-white);

    --color-text-on-primary-dark: var(--color-white);
    --color-text-on-secondary-dark: var(--color-white);
    --color-text-on-tertiary-dark: var(--color-white);

    --color-success: #155724;
    --color-success-background: #d4edda;
    --color-success-border-color: #c3e6cb;
    --color-error: #FF0000;

    --color-darkmode-background: #232c3b;
    --color-darkmode-text: #ffffff;

    --color-dark-background: #232c3b;

    --font-familly: Verdana, Calibri, sans-serif;
    --font-size: 14px;
    --text-color: var(--color-black);
    --letter-spacing: 1px;
}