:root {
  /* default = pragma4U */
  --primaryMenuSystem: #243356;
  --primaryMenuSystemTextAndIcon: #7e89b3;
  --secondaryMenuSystem: #505c83;
  --secondaryMenuItemDetProx: var(--primaryMenuSystemTextAndIcon);
  --secondaryMenuShortcuts: #aeb9e5;
  --tertiary: #ddebff;
  --accent: #1452cc;
}

/* override cosmetico */
:root[data-theme="pragma4UCosmetics"] {
  /*--primaryMenuSystem: #644277;
  --primaryMenuSystemTextAndIcon: #f8f1ff;
  --secondaryMenuSystem: #816293;
  --secondaryMenuItemDetProx: #9a64b7;
  --secondaryMenuShortcuts: #bda3cb;*/

  --primaryMenuSystem: #644277;
  --primaryMenuSystemTextAndIcon: #c8b3d6;
  --secondaryMenuSystem: #816293;
  --secondaryMenuItemDetProx: var(--primaryMenuSystemTextAndIcon); 
  --secondaryMenuShortcuts: #bda3cb;
  --tertiary: #f2e6f7;
  --accent: #9A2ECC;
}

/* override green */
:root[data-theme="pragma4UGreen"] {
  --primaryMenuSystem: #11635B;
  --primaryMenuSystemTextAndIcon: #6baaa4;
  --secondaryMenuSystem: #2a7c73;
  --secondaryMenuItemDetProx: var(--primaryMenuSystemTextAndIcon);
  --secondaryMenuShortcuts: #8fc2bc;
}

/* override orange */
:root[data-theme="pragma4UOrange"] {
  --primaryMenuSystem: #8C3F0A;
  --primaryMenuSystemTextAndIcon: #E9C8B0;
  --secondaryMenuSystem: #A55A28;
  --secondaryMenuItemDetProx: var(--primaryMenuSystemTextAndIcon);
  --secondaryMenuShortcuts: #F3DECB;
}

/* override pink */
:root[data-theme="pragma4UPink"] {
  --primaryMenuSystem: #8B3A4A;            /* base: rosa scuro/bordeaux tenue */
  --primaryMenuSystemTextAndIcon: #E7C0C9; /* chiaro, smorzato */
  --secondaryMenuSystem: #A05263;          /* intermedio */
  --secondaryMenuItemDetProx: var(--primaryMenuSystemTextAndIcon);
  --secondaryMenuShortcuts: #F1D7DE;       /* chiaro pastello */
}

:root[data-theme="pragma4UYellow"] {
  --primaryMenuSystem: #A67C00;            /* base: giallo ocra scuro */
  --primaryMenuSystemTextAndIcon: #F1E0B0; /* chiaro caldo, leggibile */
  --secondaryMenuSystem: #C08F1A;          /* intermedio */
  --secondaryMenuItemDetProx: var(--primaryMenuSystemTextAndIcon);
  --secondaryMenuShortcuts: #F7ECCE;       /* chiaro/pastello */
}


:root[data-theme="pragma4UDark"] {
  --primaryMenuSystem: #2B2B2B;            /* base: grigio scuro, non nero */
  --primaryMenuSystemTextAndIcon: #C8C8C8; /* grigio chiaro caldo, leggibile */
  --secondaryMenuSystem: #3A3A3A;          /* intermedio */
  --secondaryMenuItemDetProx: var(--primaryMenuSystemTextAndIcon);
  --secondaryMenuShortcuts: #E0E0E0;       /* ancora più chiaro per highlight */
}