:root {
    /* ===== FONT FAMILY ===== */
    --font-family-primary: 'Roboto', sans-serif;
    --icon-font-family: "icons8_win10";

    /* ===== COLORI BASE ===== */
    --color-white: #ffffff;
    --color-dark: #1d2127;
    --color-primary: #ff9a23;
    --color-primary-dark: #ed3200;
    --color-primary-rgba-3: rgba(255, 154, 35, 0.3);

    /* ===== COLORI TESTO ===== */
    --text-color: #1d2127;
    --text-color-light: #ffffff;
    --text-title-color: #343a40;
    --text-content-color: #495057;
    --light-text-color: #bbb;
    --text-color-button: #FFFFFF;

    /* ===== DIMENSIONI FONT TESTO ===== */
    --text-xxsmall-font-size: 10px;
    --text-xsmall-font-size: 11px;
    --text-small-font-size: 12px;
    --text-normal-font-size: 13px;
    --text-medium-font-size: 16px;
    --text-large-font-size: 19px;
    --text-xlarge-font-size: 20px;
    --thead-font-size: 12px;

    /* ===== ICONE ===== */
    --icon-font-color: #1D212772;
    --icon-font-size-xxsmall: 11px;
    --icon-font-size-xsmall: 12px;
    --icon-font-size-small: 14px;
    --icon-font-size-normal: 16px;
    --icon-font-size-medium: 18px;
    --icon-font-size-large: 22px;
    --icon-font-size-x-large: 24px;
    --sidebar-icon-color: #1D212772;
    --sidebar-icon-hover-color: #454545;
    --spInfinity-icon-color: #1D212799;

    /* ===== BACKGROUND ===== */
    --main-background: #fff;
    --custom-background-color: #f3f3f3;
    --background-hover: #f3f3f3;
    --background-grid-hover: rgb(1 86 203 / 10%);
    --page-background: linear-gradient(225deg, #ff9a23 0%, #ed3200 100%) !important;
    --background-semi-transparent: rgba(255, 255, 255, 0.71);
    --list-background-color: #F3F3F3;
    --spInfinity-background-color:#F3F3F3;
    --input-background-color:#f3f3f3;

    /* ===== THEME COLORS ===== */
    --theme-background: #01B4CB;
    --theme-background-op: #01b4cb47;
    --theme-background-inf: #0193CB;
    --theme-button: #0193CB 0% 0% no-repeat padding-box;

    /* ===== BUTTON ===== */
    --button-small-width: 40px;
    --button-medium-width: 120px;
    --button-large-width: 200px;
    --button-hover-color: #e9e9e9;
    --padding-btn-primary: 6px 8px;
    --background-btn-primary: linear-gradient(253deg, var(--theme-background) 0%, var(--theme-background-inf) 25%, var(--color-primary) 52%, #4437C1 80%, #4437C1 100%) 0% 0% no-repeat padding-box;
    --background-btn-secondary-hover: rgb(29 33 39 / 8%);
    --background-btn-hover: linear-gradient(225deg, #ff9a23 0%, #ed3200 100%);
    --border-btn-primary: 1px solid var(--color-primary);

    /* ===== BORDER ===== */
    --border-light-color: rgb(29 33 39 / 10%);
    --border-color: #1D212772;
    --border-solid-type-1: 1px solid rgb(29 33 43 / 10%);
    --border-solid-type-2: 2px solid #e2e2e2;
    --border-hover: 2px solid var(--color-primary);
    --tabstrip-border-color: #e9e9ea;

    /* ===== BORDER RADIUS ===== */
    --border-radius-type-1: 5px;
    --border-radius-type-2: 6px;
    --border-radius-type-3: 15px;
    --border-radius-button: 25px;

    /* ===== BOX SHADOW ===== */
    --box-shadow-type-1: 0 3px 6px 0 rgb(0 0 0 / 8%);
    --box-shadow-type-2: 0 6px 20px 0 rgb(0 0 0 / 8%);

    /* ===== DEVICE STATUS COLORS ===== */
    --device-on-color: #76c893;
    --device-off-color: #f96262;
    --device-reload-color: #ffa200;

    /* ===== DROPDOWN MENU ===== */
    --dropdown-menu-background: rgba(255, 255, 255, 0.71);
    --dropdown-menu-backdrop-filter: blur(5px);
    --dropdown-menu-padding: 10px 5px;
    --dropdown-menu-font-size: 13px;
    --dropdown-menu-list-border-radius: 6px;
    --dropdown-menu-box-shadow: 0px 0px 10px rgb(0 0 0/25%);
}