:root {
    /* Main Theme Variables */
    --side-bar-width: 320px;
    --icon-font-size: 20px;
    --icon-font-size-mobile: 14px;
    /* fonts */
    --mit-font-Xsmall: 12px;
    --mit-font-small: 14px;
    --mit-font-medium: 16px;
    --mit-font-large: 20px;

    --mit-font-family: "Inter", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

    /* Main Theme Colour */
    --mit-primary-1000: #740220;
    --mit-primary-900: #A1022C;
    --mit-primary-800: #C30235;
    --mit-primary-700: #D40139;
    --mit-primary-600: #E2013D;
    --mit-primary-500: #E8104A;
    --mit-primary-400: #ED2F62;
    --mit-primary-300: #F6537E;
    --mit-primary-200: #FF93AF;
    --mit-primary-100: #FFBBCD;
    --mit-primary-50: #FFDFE8;
    --mit-primary-25: #FFF7F9;

    /* Dark Theme Colours */
    --mit-dark-1000: #1D0C0C;
    --mit-dark-900: #281010;
    --mit-dark-850: #2D1717;
    --mit-dark-800: #391D1D;
    --mit-dark-700: #543434;
    --mit-dark-500: #856666;
    --mit-dark-400: #B39898;
    --mit-dark-300: #DDD0D0;

    /* Gray Colours */
    --mit-gray-900: #212121;
    --mit-gray-800: #353535;
    --mit-gray-700: #535353;
    --mit-gray-600: #656565;
    --mit-gray-500: #848484;
    --mit-gray-400: #B1B1B1;
    --mit-gray-300: #D9D9D9;
    --mit-gray-200: #EFEFEF;
    --mit-gray-100: #F4F4F4;
    --mit-gray-50: #F9F9F9;
    --mit-gray-25: #FCFCFC;

    /* Success */
    --mit-success-900: #054F31;
    --mit-success-800: #05603A;
    --mit-success-700: #027A48;
    --mit-success-600: #039855;
    --mit-success-500: #12B76A;
    --mit-success-400: #32D583;
    --mit-success-300: #6CE9A6;
    --mit-success-200: #A6F4C5;
    --mit-success-100: #D1FADF;
    --mit-success-50: #ECFDF3;
    --mit-success-25: #F6FEF9;

    /* Warning */
    --mit-warning-900: #7A2E0E;
    --mit-warning-800: #93370D;
    --mit-warning-700: #B54708;
    --mit-warning-600: #DC6803;
    --mit-warning-500: #F79009;
    --mit-warning-400: #FDB022;
    --mit-warning-300: #FEC84B;
    --mit-warning-200: #FEDF89;
    --mit-warning-100: #FEF0C7;
    --mit-warning-50: #FFFAEB;
    --mit-warning-25: #FFFCF5;

    /* Error */
    --mit-error-900: #7A271A;
    --mit-error-800: #912018;
    --mit-error-700: #B42318;
    --mit-error-600: #D92D20;
    --mit-error-500: #F04438;
    --mit-error-400: #F97066;
    --mit-error-300: #FDA29B;
    --mit-error-200: #FECDCA;
    --mit-error-100: #FEE4E2;
    --mit-error-50: #FEF3F2;
    --mit-error-25: #FFFBFA;

    /* Main Colours */
    --mit-white: #FFF;
    --mit-black: #000;

    /* Light Theme Colours */
    --logo-img-bg: url(../img/logo-light-all-inkl.png);

    /* Text */
    --text-text-primary: var(--mit-gray-900);
    --text-text-secondary: var(--mit-gray-800);
    --text-text-tertiary: var(--mit-gray-700);
    --text-text-quaternary: var(--mit-gray-500);
    --text-text-body: var(--mit-gray-700);
    --text-text-invert: var(--mit-white);
    --text-text-light: var(--mit-gray-300);

    --text-brand-text-brand-primary: var(--mit-primary-600);
    --text-brand-text-brand-secondary: var(--mit-primary-300);
    --text-brand-text-brand-accent: var(--mit-primary-600);

    --text-success-text-primary: var(--mit-success-700);
    --text-warning-text-primary: var(--mit-warning-600);
    --text-error-text-primary: var(--mit-error-700);

    /* Surface (background colors) */
    --surface-surface-bg: var(--mit-white);
    --surface-surface-bg-accent: var(--mit-white);
    --surface-surface-primary: var(--mit-gray-100);
    --surface-surface-secondary: var(--mit-gray-200);
    --surface-surface-tertiary: var(--mit-gray-300);
    --surface-surface-quaternary: var(--mit-gray-500);
    --surface-surface-quinary: var(--mit-gray-50);

    --surface-brand-surface-brand-primary: var(--mit-primary-600);
    --surface-brand-surface-brand-secondary: var(--mit-primary-300);
    --surface-brand-surface-brand-tertiary: var(--mit-primary-50);
    --surface-brand-surface-brand-accent: var(--mit-primary-600);
    --surface-brand-surface-brand-subtle: var(--mit-primary-300);
    --surface-brand-surface-brand-quaternary: var(--mit-primary-800);
    --surface-brand-surface-brand-click: var(--mit-primary-900);

    --surface-button-text-button-primary: var(--mit-white);
    --surface-button-text-button-secondary: var(--text-text-tertiary);
    --surface-button-text-button-brand: var(--text-brand-text-brand-secondary);
    --surface-button-text-button-brand-active: var(--text-brand-text-brand-primary);
    --surface-button-text-button-brand-hover: var(--text-brand-text-brand-primary);
    --surface-button-surface-button-primary: var(--surface-surface-bg);
    --surface-button-surface-button-hover: var(--surface-surface-primary);
    --surface-button-surface-button-focused: var(--surface-surface-secondary);
    --surface-button-surface-secondary-button: var(--mit-primary-25);
    --surface-button-surface-secondary-button-active: var(--mit-primary-50);
    --surface-button-surface-secondary-button-hover: var(--mit-primary-100);
    --surface-button-surface-secondary-outline: var(--mit-primary-100);
    --surface-button-surface-secondary-outline-active: var(--mit-primary-50);
    --surface-button-surface-secondary-outline-hover: var(--mit-primary-100);

    --surface-success-surface-primary: var(--mit-success-50);
    --surface-success-surface-secondary: var(--mit-success-500);
    --surface-success-surface-tertiary: var(--mit-success-50);

    --surface-warning-surface-primary: var(--mit-warning-100);
    --surface-warning-surface-secondary: var(--mit-warning-500);
    --surface-warning-surface-tertiary: var(--mit-warning-50);

    --surface-error-surface-primary: var(--mit-error-50);
    --surface-error-surface-secondary: var(--mit-error-500);
    --surface-error-surface-tertiary: var(--mit-error-50);
}

[data-theme="dark"] {

    /* Text */
    --text-text-primary: var(--mit-gray-25);
    --text-text-secondary: var(--mit-dark-300);
    --text-text-tertiary: var(--mit-dark-400);
    --text-text-quaternary: var(--mit-dark-400);
    --text-text-body: var(--mit-dark-500);
    --text-text-invert: var(--mit-white);
    --text-text-light: var(--mit-dark-700);

    --text-brand-text-brand-primary: var(--mit-primary-600);
    --text-brand-text-brand-secondary: var(--mit-dark-500);
    --text-brand-text-brand-accent: var(--mit-dark-300);

    --text-success-text-primary: var(--mit-success-300);
    --text-warning-text-primary: var(--mit-warning-600);
    --text-error-text-primary: var(--mit-error-300);

    /* surface (background colors) */
    --surface-surface-bg: var(--mit-dark-1000);
    --surface-surface-bg-accent: var(--mit-white);
    --surface-surface-primary: var(--mit-dark-850);
    --surface-surface-secondary: var(--mit-dark-800);
    --surface-surface-tertiary: var(--mit-dark-700);
    --surface-surface-quaternary: var(--mit-dark-400);
    --surface-surface-quinary: var(--mit-dark-50);

    --surface-brand-surface-brand-primary: var(--mit-primary-600);
    --surface-brand-surface-brand-secondary: var(--mit-primary-600);
    --surface-brand-surface-brand-tertiary: var(--mit-dark-800);
    --surface-brand-surface-brand-accent: var(--mit-dark-300);
    --surface-brand-surface-brand-subtle: var(--mit-dark-800);
    --surface-brand-surface-brand-quaternary: var(--mit-primary-800);
    --surface-brand-surface-brand-click: var(--mit-primary-900);

    --surface-button-text-button-primary: var(--mit-white);
    --surface-button-text-button-secondary: var(--mit-white);
    --surface-button-text-button-brand: var(--mit-dark-400);
    --surface-button-text-button-brand-active: var(--mit-dark-300);
    --surface-button-text-button-brand-hover: var(--mit-primary-25);
    --surface-button-surface-button-primary: var(--surface-surface-secondary);
    --surface-button-surface-button-hover: var(--surface-surface-primary);
    --surface-button-surface-button-focused: var(--surface-surface-bg);
    --surface-button-surface-secondary-button: var(--surface-surface-bg);
    --surface-button-surface-secondary-button-active: var(--surface-surface-bg);
    --surface-button-surface-secondary-button-hover: var(--mit-dark-900);
    --surface-button-surface-secondary-outline: var(--mit-primary-300);
    --surface-button-surface-secondary-outline-active: var(--mit-primary-600);
    --surface-button-surface-secondary-outline-hover: var(--mit-primary-300);

    --surface-success-surface-primary: var(--mit-success-900);
    --surface-success-surface-secondary: var(--mit-success-500);
    --surface-success-surface-tertiary: var(--mit-success-700);

    --surface-warning-surface-primary: var(--mit-warning-900);
    --surface-warning-surface-secondary: var(--mit-warning-500);
    --surface-warning-surface-tertiary: var(--mit-warning-700);

    --surface-error-surface-primary: var(--mit-error-900);
    --surface-error-surface-secondary: var(--mit-error-500);
    --surface-error-surface-tertiary: var(--mit-error-700);
}